使用CSS3生成三角形

柔情只为你懂 2023-10-06 13:31 45阅读 0赞

练习CSS布局去尝试模仿小米官网写了一下。

结果看到了一个小三角。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDA0NjA5_size_16_color_FFFFFF_t_70][]

想了半天没搞明白，当快要放弃的时候，发现把边框放大以后，连接处是一个三角形

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDA0NjA5_size_16_color_FFFFFF_t_70 1][]

那么，我们想要上三角形的话。。。隐藏上边框，再把不需要的边框设置为透明色即可

效果：

![20200723161414771.png][]

代码如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDA0NjA5_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDA0NjA5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/202007231609487.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDA0NjA5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDA0NjA5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200723161203769.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDA0NjA5,size_16,color_FFFFFF,t_70
[20200723161414771.png]: https://img-blog.csdnimg.cn/20200723161414771.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDA0NjA5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200723161610452.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDA0NjA5,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，45人围观）

还没有评论，来说两句吧...

相关阅读

相关使用CSS3生成三角形

练习CSS布局去尝试模仿小米官网写了一下。结果看到了一个小三角。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

柔情只为你懂/ 2023年10月06日 13:31/ 0 赞/ 46 阅读

相关案例-三角形（CSS3）

案例-三角形（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta c

Myth丶恋晨/ 2023年10月03日 13:57/ 0 赞/ 21 阅读

相关 css3实现三角形

原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了 .arrow{ width:

末蓝、/ 2023年07月24日 08:36/ 0 赞/ 31 阅读

相关 Css3制作三角形图标

在建站过程中，有时候需要给部分容器添加装饰效果，这样就会添加小图标，今天和大家分享用Css3制作三角形图标。在Css3之前，我们使用transparent属性来实现背景颜色

布满荆棘的人生/ 2022年12月04日 08:44/ 0 赞/ 254 阅读

相关使用css实现三角形

需要的效果（下图中任意一个颜色的三角形） ![在这里插入图片描述][20210201095602850.png] 以上图案实现的代码 .box{

谁借莪１个温暖的怀抱￠/ 2022年10月26日 12:56/ 0 赞/ 257 阅读

相关 css3实现三角形

1. ![20210809135923946.png][] <div class="upper"></div> .upper { widt

阳光穿透心脏的1/2处/ 2022年09月04日 00:47/ 0 赞/ 241 阅读

相关 CSS3实现三角形效果

原文：[Magic of CSS border property][] 译文：不可思议的CSS border属性译者：dwqs 在CSS中，其border属性有很多的规

Bertha 。/ 2022年06月12日 22:38/ 0 赞/ 382 阅读

相关 CSS3 三角形

使用纯CSS绘制图片可以减少请求位图带来的网络开销，提高渲染速度。 CSS绘制三角形主要利用了——当元素的宽高慢慢缩小为0时，4个边框也会由梯形逐渐变为三角形。常和b

约定不等于承诺〃/ 2022年05月27日 06:45/ 0 赞/ 229 阅读

相关 css3实现三角形、等腰梯形

三角形 <div class="box"></div> .box { width:0px; height:0px; b

不念不忘少年蓝@/ 2021年11月01日 19:24/ 0 赞/ 846 阅读

相关使用CSS3绘制一个实心三角形

效果如下： ![20181126095235664.png][] 实现这一过程其实很简单： 1、先创建一个盒子 <div id="trangle"></d

末蓝、/ 2021年09月17日 02:40/ 0 赞/ 493 阅读