css三角形绘制方法总结

rickchen 发布于2019-08-29 13:13 / 1572人阅读

摘要：在做页面重构的时候，免不了和各种小图标打交道，这其中最多的应该是三角形以及箭头，一般情况下可以通过伪类使用解决大部分问题。

在做UI（页面重构）的时候，免不了和各种小图标打交道，这其中最多的应该是三角形以及箭头，一般情况下可以通过伪类使用unicode解决大部分问题。

现在我们来总结下几种使用css绘制三角形的方法，dom结构如下：

最简单最方便的办法 background

代码忽略

unicode

.triangle:after{
    display:block;
    content:"25B2";
    color:"#fd5353";
    font-size:20px;
}

注意，伪类必须加上content属性，否则不生效

unicode图表

border

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

使用border绘制三角形是什么原理？事实上，宽度相等的border是以45度对接的，如下图：

那么没有了上border就是如下图：

再设置div的宽度为0，就是如下图：

再设置div的高度为0，如下图：

最后设置左右border的颜色为透明，如下图：

再来个动图：

通过这种原理，我们可以做更多的图形，比如五角星、六角星等，更多图形请移步shapesofcss

使用css3 transform rotate

.triangle {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
    
    //划重点
    overflow:hidden;
}

.triangle: before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
    
    //划重点
    transform-origin: 0 100%;        
    transform: rotate(45deg);
}

为什么是1.41，因为正方形的对角线长度是约等于1.414。

使用clip-path

.triangle{
    width:200px;
    height:200px;
    background:#fd5353;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

clip-path不支持安卓4.4以下，其余均需使用浏览器前缀-webkit，caniuse

详细请移步 clip-path

原文

GPU云服务器云服务器三角形绘制 html5三角形绘制 css三角形 css三角

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

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

用CSS绘制三角形

摘要：代码如下代码代码效果如下绘制此时，我们就可以根据上述的内容画出不同朝向的三角形了，例如当我们需要一个朝上的三角形，就不需要设置上边框，其他的以此类推。引入用 CSS 绘制三角形，只是对 border 属性的简单应用。平时使用 border 属性的时候多留意一下，就会发现其中的技巧。下面，我们先看以下代码： HTML代码： ---------- CSS代码： .test{ ...

hover_lew 2019-08-28 18:11 评论0 收藏0
CSS 绘制各种形状

摘要：说明使用可以绘制出许多形状，比如三角形梯形圆形椭圆，等并不只是可以绘制矩形。前面后面左面右面下面查看示例总结文中实现的各种形状，也许你觉得实现的很复杂，其实你也可以使用这一个属性，绘制各种形状。说明使用 CSS 可以绘制出许多形状，比如三角形、梯形、圆形、椭圆，等并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。为了容易理解，文章分为基本形状和组合形状来说，基本形状是比较...

3fuyu 2019-08-02 16:09 评论0 收藏0
CSS 绘制各种形状

摘要：说明使用可以绘制出许多形状，比如三角形梯形圆形椭圆，等并不只是可以绘制矩形。前面后面左面右面下面查看示例总结文中实现的各种形状，也许你觉得实现的很复杂，其实你也可以使用这一个属性，绘制各种形状。说明使用 CSS 可以绘制出许多形状，比如三角形、梯形、圆形、椭圆，等并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。为了容易理解，文章分为基本形状和组合形状来说，基本形状是比较...

geekzhou 2019-08-30 15:43 评论0 收藏0
用 CSS 实现三角形与平行四边形

摘要：所以我们需要加一个内层元素，并对内层元素做一次逆向的歪曲，从而得到我们想要的效果实现代码如下，另附示例上海总结第一种方法使用属性出三角形，并通过对三个元素进行拼接最终实现了平行四边形而第二种方法则通过来得到平行四边形。本文最初发布于我的个人博客：咀嚼之味最近在逛某个技术网站的时候，感觉文章关键词上的样式好酷炫啊。于是我将那种写法照搬到了我的博客中，也许最近逛过我博客的小伙伴已经发现...

Martin91 2019-08-28 18:14 评论0 收藏0
【基础】在CSS中绘制三角形及相关应用

摘要：基本原理在中，我们可以利用四个属性来绘制三角形。绘制三角形等边三角形等边三角形又称正三边形，为三边相等的三角形，其三个内角相等，均为，它是锐角三角形的一种。简言本文简要阐述了用CSS边框的方法在页面上绘制三角形，包括几种典型的三角形绘制，还介绍了几个简单的应用场景。利用边框绘制三角形方法只是众多方案中的一种，大家根据项目实际，选用最适宜项目的方案。 showImg(https://...

Lycheeee 2019-08-30 15:53 评论0 收藏0