圆，半圆

在这里插入图片描述

// 圆 宽高相等， border-radius大于宽度的一半
.circle{width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;
}

拓展链接： border-style之dotted显示一个圆 https://blog.csdn.net/kanghui_898/article/details/70837694

// 左半圆 宽度是高度的一半，左上，左下border-radius是高度的一半
.circle-half-left{width: 50px;height: 100px;background: red;border-radius: 50px 0 0 50px;
}// 右半圆 宽度是高度的一半，右上，右下border-radius是高度的一半
.circle-half-right{width: 50px;height: 100px;background: red;border-radius: 0 50px 50px 0;
}// 上半圆 高度是宽度的一半，左上，右上border-radius是宽度的一半
.circle-half-top{width: 100px;height: 50px;background: red;border-radius: 50px 50px 0 0;
}// 下半圆 高度是宽度的一半，左下，右下border-radius是宽度的一半
.circle-half-bottom{width: 100px;height: 50px;background: red;border-radius: 0 0 50px 50px;
}

拓展下，是不是还挺漂亮（可根据需要自由组合，玩一玩）
在这里插入图片描述

// leaf1 宽高相等
.leaf1-left{width: 50px;height: 50px;background: red;border-radius: 0 50px;
}
.leaf1-right{width: 50px;height: 50px;background: red;border-radius: 50px 0;
}// leaf1 宽高不等
.leaf2-left{width: 100px;height: 50px;background: red;border-radius: 0 50px;
}
.leaf2-right{width: 100px;height: 50px;background: red;border-radius: 50px 0;
}.leaf2-top{width: 50px;height: 100px;background: red;border-radius: 0 50px;
}
.leaf2-bottom{width: 50px;height: 100px;background: red;border-radius: 50px 0;
}

三角形

在这里插入图片描述

// 上三角 左右边框透明，下边框不透明
.triangle-up{width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 50px solid red;
}// 下三角 左右边框透明，上边框不透明
.triangle-down{width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 50px solid red;
}// 左三角 上下边框透明，右边框不透明
.triangle-left{width: 0;height: 0;border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-right: 50px solid red;
}// 右三角 上下边框透明，左边框不透明
.triangle-right{width: 0;height: 0;border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-left: 50px solid red;
}