一、对称胶囊
通过两个半个胶囊组合而成，分别控制颜色及圆角
xml
<body>
<div class="app">
<div class="box">
<div class="box-1 horizontal">横向</div>
<div class="box-2 horizontal">对称</div>
</div>
<div class="box2">
<div class="box-11 vertical">竖向</div>
<div class="box-22 vertical">对称</div>
</div>
</div>
</body>
<style>
.app {
padding: 200px;
}
/* 横向对称 */
.box {
display: flex;
margin-bottom: 10px;
}
.horizontal {
width: 80px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: aqua;
}
.box-1 {
/* 分别为左上、右上、右下、左下 */
border-radius: 25px 0 0 25px;
}
.box-2 {
/* 分别为左上、右上、右下、左下 */
border-radius: 0 25px 25px 0;
background-color: pink;
}
/* 竖向对称 */
.vertical {
width: 50px;
height: 80px;
line-height: 80px;
text-align: center;
background-color: aqua;
}
.box-11 {
/* 分别为左上、右上、右下、左下 */
border-radius: 25px 25px 0 0;
}
.box-22 {
/* 分别为左上、右上、右下、左下 */
border-radius: 0 0 25px 25px;
background-color: pink;
}
</style>二、半圆
设置一个长方形，长为宽的二倍
xml
<body>
<div class="app">
<div class="horizontal">横向半圆</div>
<div class="vertical">竖向半圆</div>
</div>
</body>
<style>
.app {
padding: 200px;
}
.horizontal {
width: 100px;
height: 50px;
line-height: 50px;
background: aqua;
border-radius: 0 0 50px 50px;
text-align: center;
margin-bottom: 10px;
}
.vertical {
width: 50px;
height: 100px;
line-height: 50px;
background: aqua;
text-align: center;
border-radius: 50px 0 0 50px;
letter-spacing: 5px;
}
</style>三、90°扇形
通过某一个角的圆角角度，实现扇形，不同方向还可以搭配旋转实现
xml
<body>
<div class="box">
<div class="toprt-sector">左上</div>
<div class="toplf-sector">右上</div>
<div class="botlf-sector">右下</div>
<div class="botrt-sector">左下</div>
</div>
</body>
<style>
.box{
display: flex;
}
.toplf-sector,
.toprt-sector,
.botlf-sector,
.botrt-sector {
width: 60px;
height: 60px;
background: aqua;
line-height: 60px;
text-align: center;
margin-right: 10px;
}
.toprt-sector {
border-radius: 60px 0 0 0;
}
.toplf-sector {
border-radius: 0 60px 0 0;
}
.botlf-sector {
border-radius: 0 0 60px 0;
}
.botrt-sector {
border-radius: 0 0 0 60px;
}
</style>四、4等份圆
四个盒子组合实现
- 通过四个盒子分别设置圆角组合实现
xml
<body>
<div class="box">
<div class="toprt-sector">左上</div>
<div class="toplf-sector">右上</div>
<div class="botrt-sector">左下</div>
<div class="botlf-sector">右下</div>
</div>
</body>
<style>
.box{
display: flex;
flex-wrap: wrap;
width: 120px;
}
.toplf-sector,
.toprt-sector,
.botlf-sector,
.botrt-sector {
width: 60px;
height: 60px;
background: aqua;
line-height: 60px;
text-align: center;
}
.toprt-sector {
border-radius: 60px 0 0 0;
}
.toplf-sector {
border-radius: 0 60px 0 0;
background-color: pink;
}
.botlf-sector {
border-radius: 0 0 60px 0;
background-color: yellow;
}
.botrt-sector {
border-radius: 0 0 0 60px;
background-color: goldenrod;
}
</style>一个盒子实现
- 通过一个盒子的四个边框圆角实现，可以搭配旋转使用
xml
<body>
<div class="box">
</div>
</body>
<style>
.box{
width: 0;
height: 0;
border-radius: 50%;
border: 120px solid;
border-left-color: pink;
border-right-color: yellow;
border-top-color: gold;
border-bottom-color: aqua;
transform: rotate(45deg);
}
</style>五、吃豆人
通过某一角度边框透明实现，也可以通过四个盒子组合，某一个盒子设置透明
xml
<body>
<div class="box">
</div>
</body>
<style>
.box{
width: 0;
height: 0;
border-radius: 50%;
border: 120px solid aqua;
border-right-color: rgba(255, 255, 0, 0);
}
</style>六、对话框
通过伪元素加定位实现与Y轴偏移实现，宽高设为0，其中一个边框有色，其他透明色
xml
<body>
<div class="box">对话框</div>
</body>
<style>
.box{
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 10px;
background-color: aqua;
position: relative;
}
.box::after{
content: '';
width: 0;
height: 0;
position: absolute;
bottom: 0;
right: 20px;
transform: translateY(20px);
border: 10px solid aqua;
border-bottom-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
}
</style>八、爱心
伪元素实现
旋转正方形为菱形，两个伪元素分别控制两边半圆部分，随后通过定位调整位置
xml
<body>
<div class="box">
<div class="love"></div>
</div>
</body>
<style>
.box{
padding: 200px;
}
.love {
width: 100px;
height: 100px;
background: aqua;
position: relative;
transform: rotate(45deg);
}
.love::before,
.love:after {
content: "";
background: aqua;
position: absolute;
display: inline-block;
}
.love:after {
width: 50px;
height: 100px;
border-radius: 50px 0 0 50px;
right: 99px;
top: 0;
}
.love::before {
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
bottom: 99px;
left: 0;
}
</style>三盒子实现
旋转正方形为菱形，两个盒子分别控制两边半圆部分，随后通过定位调整位置
xml
<body>
<div class="box">
<div class="love">
<div class="loveLeft"></div>
<div class="loveRight"></div>
</div>
</div>
</body>
<style>
.box {
padding: 200px;
}
.love {
width: 80px;
height: 80px;
background: aqua;
transform: rotate(45deg);
position: relative;
}
.loveLeft,
.loveRight {
position: absolute;
background-color: pink;
}
.loveLeft {
width: 40px;
height: 80px;
left: -40px;
top: 0;
border-radius: 40px 0 0 40px;
}
.loveRight {
width: 80px;
height: 40px;
right: 0;
top: -40px;
border-radius: 40px 40px 0 0;
}
</style>