阿里云

使用纯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;
}


喜欢就点个赞吧

发表评论

需要先登录,才能发表评论哦!登录

网友评论
暂无评论