使用纯CSS创建三角形形状
如何在页面中实现三角形，有以下几种方式；
一、使用css绘制三角形
HTML代码：
<div class="triangle"></div>CSS代码：
（1）箭头向上
.triangle {
width: 0;
height: 0;
border-bottom: 20px solid #333;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}（2）箭头向右
.triangle {
width: 0;
height: 0;
border-left: 20px solid #333;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}（3）箭头向下
.triangle {
width: 0;
height: 0;
border-top: 20px solid #333;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}（4）箭头向左
.triangle {
width: 0;
height: 0;
border-right: 20px solid #333;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}（5）箭头向右上
.triangle {
width: 0;
height: 0;
border-right: 20px solid #333;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
}（6）箭头向右下
.triangle {
width: 0;
height: 0;
border-right: 20px solid #333;
border-left: 20px solid transparent;
border-top: 20px solid transparent;
}（7）箭头向左下
.triangle {
width: 0;
height: 0;
border-left: 20px solid #333;
border-right: 20px solid transparent;
border-top: 20px solid transparent;
}（8）箭头向左上
.triangle {
width: 0;
height: 0;
border-left: 20px solid #333;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
}颜色调整更改#333，更改为合适颜色。
二、使用图片
图片方式就是由美工设计并制作，利用css代码通过背景图片来实现
实例图片：
image.png
示例代码
HTML：
<div id="box"></div>CSS：
#box{
width: 400px;
height: 300px;
border:solid 2px #999;
border-radius: 5px;
margin:0 auto;
background:url('./ershisi.png');
background-size: 50%;
background-repeat: no-repeat;
background-position: 30px 30px;
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-12-02，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读