CSS 三角形绘制方法

siberiawolf 发布于2019-08-30 12:58 / 2128人阅读

摘要：代码如下代码如下代码如下代码如下代码如下代码如下代码如下代码如下

代码如下:

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

代码如下:

#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}

代码如下:

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

代码如下:

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

代码如下:

#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}

代码如下:

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

代码如下:

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

代码如下:

#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}

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

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

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

【基础】在CSS中绘制三角形及相关应用

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

Lycheeee 2019-08-30 15:53 评论0 收藏0
css三角形绘制方法总结

摘要：在做页面重构的时候，免不了和各种小图标打交道，这其中最多的应该是三角形以及箭头，一般情况下可以通过伪类使用解决大部分问题。在做UI（页面重构）的时候，免不了和各种小图标打交道，这其中最多的应该是三角形以及箭头，一般情况下可以通过伪类使用unicode解决大部分问题。现在我们来总结下几种使用css绘制三角形的方法，dom结构如下：最简单最方便的办法 background 代码忽略...

rickchen 2019-08-29 13:13 评论0 收藏0
运用clip-path的纯CSS形状变换

摘要：在之前所提到绘制正多边形的方法，算是纯粹利用伪元素来完成，不过坦白说还有另外一种方法，可以将单一做更多形状的变换，这种方法就是的，这个看起来有点眼熟，因为它原本就存在于里头，利用掩码剪裁的方法，连接坐标绘制掩码区域，就可以做出许多不同的在之前所提到绘制正多边形的方法，算是纯粹利用伪元素来完成，不过坦白说还有另外一种方法，可以将单一div做更多形状的变换，这种方法就是CSS3的clip...

wanglu1209 2019-08-29 18:39 评论0 收藏0
用CSS绘制三角形

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

hover_lew 2019-08-28 18:11 评论0 收藏0