// 想要得到一个圆,我们可以通过 border-radius 设置. 矩形的的长宽一样
// 圆角半径恰好是 其长度的一半
div{
width:160px;
height:160px;
background-color: black;
border-radius: 80px;
}
// 半圆->是绘制一个矩形,随意一侧的两个角圆角即可
.div{
width:160px;
height:80px;
background-color: black;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
}
// 上述的需求实现的思路是 从半圆的绘制里面得到的,绘制一个 白色背景的 半圆 定位上去.
// 得到 带弧度的 三角
// 结构
<div class="box2">
<dd></dd>
<span>对酒当歌,人生几何</span>
</div>
// css
.box2 {
width: 160px;
background: red;
border-radius: 0em 0em .8em .8em;
padding: 37px 20px 20px 20px;
margin: 100px auto;
position: relative;
}
.box2>dd:first-child {
position: absolute;
top: -2px;
left: -39px;
width: 199px;
height: 23px;
background-color: #fff;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
}