以下这些造型简单的图形都是纯CSS外加一个HTML标签实现的,不少实现以前我介绍过,或者你也知道,但是有些相信你没见过。
1. 正方形
实时渲染效果如下:
相关CSS代码:
#square {
width: 100px; height: 100px;
background: red;
}
2. 长方形
效果:
相关CSS代码:
web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
#rectangle {
width: 200px; height: 100px;
background: red;
}
这里推荐一下我的前端学习交流扣qun:731771211 ,里面都是学习前端的
3. 正圆
这个显然借助圆角实现,效果如下:
相关CSS代码:
#circle {
width: 100px; height: 100px;
background: red;
border-radius: 50%
}
4. 椭圆
效果如下:
相比正圆就是尺寸有些不一样,相关CSS代码:
#oval {
width: 200px; height: 100px;
background: red;
border-radius: 50%;
}
5. 向上三角
效果如下:
相关CSS代码:
#triangle-up {
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
6. 向下三角
效果如下:
相关CSS代码:
#triangle-down {
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
7. 方向朝左的三角
效果如下:
相关CSS代码:
#triangle-left {
width: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
8. 方向朝右的三角
效果如下:
相关CSS代码:
#triangle-right {
width: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
这里推荐一下我的前端学习交流扣qun:731771211 ,里面都是学习前端的
9. 左上三角
效果如下:
相关CSS代码:
web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
#triangle-topleft {
width: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
也可以使用一个45°的斜向线性渐变实现,不过兼容性没有使用border
实现好。
10. 右上三角
效果如下:
相关CSS代码:
#triangle-topright {
width: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
也可以使用一个45°的斜向线性渐变实现,不过兼容性没有使用border
实现好。
11. 左下角三角图形
效果如下:
相关CSS代码:
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
也可以使用渐变绘制。
12. 右下角三角图形
效果如下:
相关CSS代码:
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
也可以使用渐变绘制。
13. 弧形尾箭头
效果如下:
完整CSS代码:
#curvedarrow {
position: relative;
width: 0;
border-top: 90px solid transparent;
border-right: 90px solid red;
transform: rotate(10deg) translateX(100%);
}
#curvedarrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 30px solid red;
border-radius: 200px 0 0 0;
top: -120px; left: -90px;
width: 120px; height: 120px;
transform: rotate(45deg);
}
实际使用用不到这么大的图形,只要把CSS中所有的数值(不包括旋转)全部都缩小10倍就好了。