css画布半弧 |css三角提示

bottom css美化，css3 ba，jsp怎么使用css文件，css和溪木源，css输入框文字空隙，css 字体的透明度，css三角提示 css画布半弧 |css三角提示

//HTML代码
<div class="arc">
</div>
//CSS代码
.arc {
width: 200px;
height: 100px;
border-radius: 100px 100px 0 0;
background: blue;
}

上述代码中的div元素就是大家要绘制的半弧。代码中，border-radius属性用来设置元素的四个角的圆角半径，前两个值设置左上角圆角半径，后两个值设置右上角圆角半径，由于大家要绘制半弧，因此只需要将左上角和右上角这两个圆角半径设置成元素宽度和高度的一半即可。另外，设置元素的背景颜色为蓝色。

如果需要将半弧与直线相连，可以再添加一段CSS代码：

//CSS代码
.arc::before {
content: '';
width: 200px;
height: 1px;
background: blue;
display: block;
position: relative;
top: -50px;
}

上述代码中，before伪元素用于在半弧上方绘制一条横线。content属性用于定义before元素的内容，值为一个空字符串，width和height属性设置before元素宽度和高度，将背景颜色设置为蓝色，position属性用于将元素定位到离半弧顶部50px的位置。

至此，通过CSS代码就可以实现半弧绘制了。