用css画半圆、圆、线性箭头

作者：秋刀鱼在做梦 | 2024-07-13 20:54:12

踩

css画半圆

一、css画半圆

border-radius
可以设置盒子四边的弧度。可以设置%，px等单位。

在css中利用border-radius可以画出圆形，半圆，等图案

半圆需要两个块元素，两个块元素分别设置一个对应的角即可。


    <style>
        .a{
            width: 200px;
            height: 200px;
            background-color: red;
            border-top-left-radius: 200px;
        }
        .b{
            width: 200px;
            height: 200px;
            background-color: red;
            border-bottom-left-radius: 200px;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
</body>

平行半圆同理。

二、 css画圆

绘制一个圆形，只需要使用border-radius内缩50%即可。


        div{
            width: 300px;
            height: 300px;
            background-color: red;
            border-radius: 50%;
        }

三、 css画线性箭头

原理和实心箭头一样，不过需要旋转一下元素。

1.先设置div属性


div{
    width: 100px;
    height: 100px;
    border-color: red red transparent transparent;
    border-width: 5px;
    border-style: solid;
}

2.设置旋转

transform: matrix(0.75, 0.75, -0.75, 0.75, 0, 0);

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/821510