css怎么实现三角形

实现方法:1、利用高宽为零的容器和透明的border;2、利用线性渐变linear-gradient;3、使用“transform:rotate”配合“overflow:hidden”;4、利用“&#9660”、“&#9650”等字符绘制。

使用 border 绘制三角形 

使用 border 实现三角形应该是大部分人都掌握的,也是各种面经中经常出现的,利用了高宽为零的容器及透明的 border 实现。

简单的代码如下:

<div class='normal'></div>
html, body {

  width: 100%;

  height: 100%;

  display: flex;

}

div {

  width: 0px;

  height: 0px;

  margin: auto;

}

.normal {

  border-top: 50px solid yellowgreen;

  border-bottom: 50px solid deeppink;

  border-left: 50px solid bisque;

  border-right: 50px solid chocolate;

}

高宽为零的容器,设置不同颜色的 border:

 这样,让任何三边的边框的颜色为 transparent,则非常容易得到各种角度的三角形:

<div class='top'></div>

<div class='bottom'></div>

<div class='left'></div>

<div class='right'></div>
.top {

  border: 50px solid transparent;

  border-bottom: 50px solid deeppink;

}

.left {

  border: 50px solid transparent;

  border-right: 50px solid deeppink;

}

 .bottom {

  border: 50px solid transparent;

  border-top: 50px solid deeppink;

}

.right {

  border: 50px solid transparent;

  border-bottom: 50px solid deeppink;

}

使用 linear-gradient 绘制三角形 

接着,我们使用线性渐变 linear-gradient 实现三角形。

它的原理也非常简单,我们实现一个 45° 的渐变:

div {

  width: 100px;

  height: 100px;

  background: linear-gradient(45deg, deeppink, yellowgreen);

}

让它的颜色从渐变色变为两种固定的颜色 

div {

  width: 100px;

  height: 100px;

  background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);

}

 

再让其中一个颜色透明即可:

div {

  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);

}

 

猜你喜欢

转载自blog.csdn.net/m0_66722601/article/details/128284257