1. 绘制原理

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标

给每个边框不同的颜色可以看到，每个边框其实都是一个小三角形，那么我们就可以只设置一个或两个边框从而让一个盒子呈现出来三角形的样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>CSS 三角制作</title><style>.box1 {width: 0;height: 0;/* border: 10px solid pink; */border-top: 50px solid pink;border-right: 50px solid red;border-bottom: 50px solid blue;border-left: 50px solid green;}</style></head><body><div class="box1"></div></body>
</html>

2. 绘制最简单的三角形

我们只需要将边框的颜色设置为透明，然后给其中一个边颜色即可有下面效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>CSS 三角制作</title><style>.box2 {width: 0;height: 0;border: 50px solid transparent;border-left-color: pink;margin: 100px auto;}</style></head><body><div class="box2"></div></body>
</html>

3. 绘制对话框

类似对话框的效果：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>京东三角形</title><style>.box {position: relative;width: 300px;height: 100px;margin: 200px auto;background-color: skyblue;padding: 10px;color: #fff;}.box span {position: absolute;width: 0px;height: 0px;right: -20px;top: 20px;border: 10px solid transparent;border-left-color: skyblue;}</style></head><body><div class="box"><span></span><p>这是段对话，我是说话者，看看效果怎么样，应该还不错</p></div></body>
</html>

4. 绘制两条直角边不等长的三角形

实现如下效果

实现思路，我们只需要拼出右侧的图形，然后将其设置绝对定位放到左边的红色矩形中就可以

我们依然可以通过三角形来实现

.box {width: 0px;height: 0px;border-top: 50px solid pink;border-right: 50px solid red;border-bottom: 50px solid blue;border-left: 50px solid green;
}

首先对于这个代码进行修改，当四个边框一样大的时候，出来的图形就很好理解

当我们将border-top设置为100px的时候，就会变成下面这种情况，可以看到上侧被拉长了，我们需要的图形就是右侧三角形的上半部分，因此我们可以把下边框的宽度设置为0

我们就得到了需要的三角形，将其他两个边框隐藏后就可以得到最后需要的图形

最后生成的图形如下，css代码：

.box {width: 0px;height: 0px;border-top: 100px solid transparent;border-right: 50px solid red;border-bottom: 0px solid transparent;border-left: 0px solid transparent;
}

对其进行简化可以为：

.box {width: 0px;height: 0px;/*顺序仍然是上右下左*/border-color: transparent red transparent transparent;border-width: 100px 50px 0px 0px;border-style: solid;
}

CSS -- 使用纯CSS绘制三角形及常见案例汇总相关推荐

CSS 如何用border绘制三角形、等腰梯形、直角梯形
CSS 如何用border绘制三角形.等腰梯形.直角梯形 border 有宽度后,四角交接处会产生斜线,可根据此原理绘制三角形.等腰梯形.直角梯形等图形. div {width: 50px;heigh ...
[css] 使用纯CSS代码实现动画的暂停与播放
[css] 使用纯CSS代码实现动画的暂停与播放一个属性:animation-play-state 取值:paused(暂停)|running(播放) hover取代点击 .stop:hover~. ...
[css] 使用纯css来创建一个滑块
[css] 使用纯css来创建一个滑块 .checke{position: relative;-webkit-appearance: none;width:90px;height: 44px;line ...
[css] 使用纯css能否监控到用户的一些信息？怎么实现？
[css] 使用纯css能否监控到用户的一些信息?怎么实现? 利用:active 伪类实现监控用户的点击 .button-1:active::after {content: url(./pixel.g ...
html编写气泡对话框,HTML+CSS入门纯CSS手写圆角气泡对话框
本篇教程介绍了HTML+CSS入门纯CSS手写圆角气泡对话框,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 嗯--我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那 ...
Backtrader来啦：常见案例汇总
量化投资与机器学习微信公众号,是业内垂直于量化投资.对冲基金.Fintech.人工智能.大数据等领域的主流自媒体.公众号拥有来自公募.私募.券商.期货.银行.保险.高校等行业30W+关注者,荣获202 ...
制作css开关,纯css实现开关效果
大家好,我又来了,这次给大家表演使用纯css实现开关效果首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则 ...
【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
php下拉框css样式,纯CSS实现的下拉菜单
实现效果实现代码 html Home WordPress Themes Plugins Tutorials Web Design Resources Links Tutorials HTML/CSS ...

CSS -- 使用纯CSS绘制三角形及常见案例汇总

文章目录

1. 绘制原理

2. 绘制最简单的三角形

3. 绘制对话框

4. 绘制两条直角边不等长的三角形

CSS -- 使用纯CSS绘制三角形及常见案例汇总相关推荐

最新文章

热门文章