CSS常用样式——绘制各种角度的三角形(1)

时间:2020-9-6 作者:admin

1. 前言

在制作前端项目时,我们经常会遇到制作下拉功能时有个小三角,除了我们用图片背景或者iconFont之外,我们可以用CSS来实现。

2. 实现原理

首先我们制作一个正常的模块,添加不同颜色的边框来看下吧!

CSS常用样式——绘制各种角度的三角形(1)

HTML代码:

<div class\="demo\_0"\></div\>

CSS代码:

.demo_0 { 
    width: 100px; 
    height: 100px;
    margin: 100px auto; 
    border: 20px solid transparent; 
    border-color: black blue chocolate coral 
}

我们会发现每个边框给我们呈现出的是一个有棱角的四边形的渲染效果,接下来我们把这个模块的widthheight都设为0,看下效果:

CSS常用样式——绘制各种角度的三角形(1)

CSS代码:

.demo_0 { 
    width: 0; 
    height: 0;
    margin: 100px auto; 
    border: 20px solid transparent; 
    border-color: black blue chocolate coral 
}

这时我们发现渲染出的效果是不是有四个三角形状的图像,这就是我们模块widthheight都设为0时,我们给它设置边框的渲染效果。
接下来我们把某一个方向的border的border-width设为0来看下效果:

CSS常用样式——绘制各种角度的三角形(1)

CSS代码:

.demo_0 { 
    width: 0; 
    height: 0;
    margin: 100px auto; 
    border: 20px solid transparent; 
    border-color: black blue chocolate coral;
    border-bottom:0;
}

到这里我们就可以总结出:

(1)制作三角形需要将该模块:宽度width为0,高度height为0;

(2)制作不同方向的类似等腰三角形时,需要将某一个方向的border-方向:高度 solid coral,相对方向border-相对方向不设置任何参数,其他方向的border-其他方向:**不同高度** solid **transparent**;进设置三个方向即可。

(3)制作不同方向的类似直角三角形时,需要将上下某一个方向的border-(top|bottom):高度 solid coral,左右某一方向的border-(left|right):**相同高度** solid **transparent**;仅设置两个方向即可。

3. 效果实现

(1)Triangle Up

CSS常用样式——绘制各种角度的三角形(1)

.triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid coral;
}
(2)Triangle Down

CSS常用样式——绘制各种角度的三角形(1)

.triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid coral;
} 
(3)Triangle Left

CSS常用样式——绘制各种角度的三角形(1)

.triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid coral;
    border-bottom: 50px solid transparent;
}
(4)Triangle Right

CSS常用样式——绘制各种角度的三角形(1)

.triangle-right{
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid coral;
    border-bottom: 50px solid transparent;
}
(5)Triangle Top Left

CSS常用样式——绘制各种角度的三角形(1)

.triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid coral;
    border-right: 100px solid transparent;
}
(6)Triangle Top Right

CSS常用样式——绘制各种角度的三角形(1)

.triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid coral;
    border-left: 100px solid transparent;
}

(7)Triangle Bottom Left

CSS常用样式——绘制各种角度的三角形(1)

.triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid coral;
    border-right: 100px solid transparent;
}

(8)Triangle Bottom Right

CSS常用样式——绘制各种角度的三角形(1)

.triangle-bottomRight {
    width: 0;
    height: 0;
    border-bottom: 100px solid coral;
    border-left: 100px solid transparent;
}
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。