本文介绍了如何使用CSS来创建半圆、圆形以及线性箭头。通过调整`border-radius`属性，可以实现半圆效果，需要两个块元素分别设置顶部或底部的左圆角。绘制完整圆形只需将`border-radius`设为50%。对于线性箭头，首先设置div的边框颜色和样式，然后利用`transform`进行旋转完成箭头形状。
一、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);
扫一扫
469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
