CSS3常见技巧（二）：如何用CSS3来实现三角形？

Jonathan Shieber 发布于2019-08-30 15:55 / 2766人阅读

摘要：站长博客如何使用来画一个三角形经常令人非常感到困惑，其实原理上是宽度相等的边距以度来连接。代码如下实现效果如图

站长博客：https://www.pipipi.net/

如何使用CSS3来画一个三角形经常令人非常感到困惑，其实原理上是宽度相等的边距以45度来连接。

首先看第一个图

这个是正常情况下，如果我们这个时候把顶部的边距设为none的话就会显示下面这种情况

再把content宽度设为0

再把content高度设为0

这个时候，很容易联想到把左右边距颜色设为透明色（transparent）

大致过程就是如此，总结一下就是如果我想到一个三角形，比如它的方向就是向左的，那么只要设置它相反放下的颜色不为透明，并把其他两个方向设为透明即可。
代码如下：

        .right{
            width:0;
            height:0;
            border-top:20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 20px solid pink;
        }
        .top{
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right:  20px solid transparent;
            border-bottom: 20px solid pink;
        }
        .left{
            width: 0;
            height:0;
            border-right:  20px solid pink;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent
        }
        .bottom{
            width: 0;
            height: 0;
            border-top: 20px solid pink;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

实现效果如图

云服务器 GPU云服务器如何用webrtc实现聊天如何用c语言实现组合如何用js实现模态框如何用php实现客服

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117344.html

CSS3常见技巧（二）：如何用CSS3来实现三角形？

摘要：站长博客如何使用来画一个三角形经常令人非常感到困惑，其实原理上是宽度相等的边距以度来连接。代码如下实现效果如图站长博客：https://www.pipipi.net/ 如何使用CSS3来画一个三角形经常令人非常感到困惑，其实原理上是宽度相等的边距以45度来连接。首先看第一个图showImg(https://segmentfault.com/img/bVbn3xN?w=576&h=3...

dantezhao 2019-08-02 14:12 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
CSS开发

摘要：译十六进制颜色揭秘原文地址原文作者译文出自掘金翻译计划本文永久链接教程入门篇关于是一款进行栅格布局的辅助工具，它让开发者摆脱了冗杂的数学计算，同时降低了样式与结构的耦合程度。【译】CSS 十六进制颜色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 译文出自：掘金翻译计划本文永久链接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 评论0 收藏0