css arrow box html,CSS中制作三角形

在CSS中制作三角形是非常常见的UI任务。

使用border边框制作CSS三角形

HTML

Four Direction of the Arrows

---

Arrow Illusion

SASS// Arrows

.arrow-up {

width: 0;

height: 0;

border-right: 16px solid transparent;

border-left: 16px solid transparent;

border-bottom: 20px solid #8888e8;

}

.arrow-right {

width: 0;

height: 0;

border-top: 16px solid transparent;

border-bottom: 16px solid transparent;

border-left: 20px solid #e888a3;

}

.arrow-down {

width: 0;

height: 0;

border-right: 16px solid transparent;

border-left: 16px solid transparent;

border-top: 20px solid #f7df6c;

}

.arrow-left {

width: 0;

height: 0;

border-top: 16px solid transparent;

border-bottom: 16px solid transparent;

border-right: 20px solid #8de698;

}

// Border behavior

.arrow-box {

width: 0;

height: 0;

border-top: 40px solid #f7df6c;

border-right: 40px solid #8de698;

border-bottom: 40px solid #8888e8;

border-left: 40px solid #e888a3;

&.has-width {

width: 20px;

height: 20px;

}

}

// Formats

body {

padding: 50px 30px;

}

.arrow-wrapper {

display: flex;

align-items: center;

justify-content: center;

margin: 30px 0 0;

> * {

margin: 0 20px;

}

}

.title {

text-transform: uppercase;

font-size: 1rem;

color: rgba(0,0,0,0.3);

text-align: center;

font-weight: 400;

margin: 0;

}

.arrow-boxes {

display: flex;

align-items: center;

justify-content: center;

margin: 30px 0 0;

> * {

margin: 0 20px;

}

}

hr {

border: none;

height: 1px;

background: rgba(0,0,0,0.1);

margin: 60px 0;

}

要创建边框，则完全可以单独设置它们的样式(上、右、下、左)。两个独立的侧面以对角线(45度)的方式相互连接，就形成了一个正方形。

css创建三角形，元素宽度和高度都应设为0。如果要做一个箭头向上的三角形，则需要为边框底部着色即可。

css创建三角形，着色的一面的对角方向可以不写任何样式，其它两个方向需写上透明transparent。

使用HTML实体制作CSS三角形

使用HTML实体是最基本的解决方案，但它可以在更简单的情况下工作。要使用它们，请将其中一个添加到:: before或:: after伪元素的content属性中。◄ : ◄

► : ►

▼ : ▼

▲ : ▲