1. 画三角形
利用元素的 border 绘制三角形，先来看一下宽高均为 0，border 有宽度的效果是啥样的：
<style>
.triangle {
width: 0;
height: 0;
border-top: 100px solid #f00;
border-right: 100px solid #0f0;
border-bottom: 100px solid #00f;
border-left: 100px solid #ff0;
}
</style>
<div class="triangle"></div>
然后我们可以通过给任意三边的颜色设置为 transparent 即可分别实现任一方向的三角形。
通过设置某条边的宽度比其它边宽，来调整三角形的高度。
<style>
.triangle {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom: 200px solid #0ff;
}
</style>
通过设置某条边的宽度比其它边窄，来调整三角形的宽度。
<style>
.triangle {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom: 200px solid #0ff;
}
</style>
2. 画扇形
任意角度的有点复杂，暂时先只实现90度的吧。
原理：左上角是圆角，其余三个角都是直角：左上角的值为宽和高一样的值，其他三个角的值不变（等于0）。 border-radius四个值的顺序是：左上角，右上角，右下角，左下角。
<style>
.sector1 {
border-radius:100px 0 0;
width: 100px;
height: 100px;
background: #00f;
}
<div class="sector1"></div>
</style>
原理：和三角形的实现有些类似。
<style>
.sector2 {
border: 100px solid transparent;
width: 0;
border-radius: 100px;
border-top-color: #f00;
}
<div class="sector2"></div>
</style>
3. 画箭头
利用三角绘制箭头，只需要再绘制一个和此三角大小相同，方向相同的三角，颜色和背景颜色一样，覆盖在此三角上面，通过少量的位移形成箭头。
<style>
.arrow{
width: 0;
height: 0;
border: 50px solid;
border-color: transparent #0f0 transparent transparent;
position: relative;
}
.arrow::after{
content: '';
position: absolute;
right: -55px;
top: -50px;
border: 50px solid;
border-color: transparent #fff transparent transparent;
}
<div class="arrow"></div>
</style>
4. 椭圆
椭圆依旧依赖 border-radius 属性，很多人应该都没注意过，border-radius 其实可以设置水平半径和垂直半径两个值 ，参考MDN - border-radius,具体用法为 border-radius: 水平半径 / 垂直半径;.
<style>
.oval {
width: 100px;
height: 50px;
background: #ff0;
border-radius: 50px / 25px;
}
</style>
<div class="oval"></div>
|
|
收藏
淘帖
踩
