CSS 三角型的实现原理

时间 2019-12-06

标签 css 三角实现原理栏目 CSS 繁體版

原文原文链接

利用border来实现三角型

源码地址spa

注意:须要设置width:0,height:03d

border的四个边框能够设置不一样的颜色，存在4个三角

border-top: 50px solid red; border-bottom: 50px solid green; border-left: 50px solid blue; border-right: 50px solid yellow;``code

从top开始取三角

border-top: 50px solid red; border-bottom: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid transparent;cdn

border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid yellow;blog

border-top: 50px solid transparent; border-bottom: 50px solid green; border-left: 50px solid transparent; border-right: 50px solid transparent;get

border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid blue; border-right: 50px solid transparent;源码

设置三角边框

div:nth-child(2) span{ content: ""; display: block; width: 0; height: 0; top: -36px; position: relative; border-top: 50px solid transparent; border-bottom: 50px solid green; border-left: 50px solid transparent; border-right: 50px solid transparent; }it

div:nth-child(2) span::before{ content: ""; display: block; width: 0; height: 0; position: absolute; top: -46px; left: -47px; border-top: 47px solid transparent; border-bottom: 47px solid yellow; border-left: 47px solid transparent; border-right: 47px solid transparent; }io

直角三角形（只须要设置一个水平边和一个垂直边）

content:""; width:0; height:0; position:absolute;/或设置display:block/ border-left: 50px solid yellow; border-bottom: 100px solid green;class

设置width/height能够获得梯形

position: absolute; /或者设置display: block，若为inline类型，则为三角形/ width: 41px; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid green; border-left: 30px solid transparent; border-right: 30px solid transparent;