css使用border画三角形

张红新发布于2019-08-28 18:20 / 2046人阅读

摘要：宽度被设为的边框对应方向的边框会形成较大的三角形，且长度加倍的采纳的显示其实也是用三角形实现的上部分是包含采纳两个字的块状元素，设置。

前端中的很多地方都会用到三角形，比如tooltip等
CSS中创建三角形的方法很多，可以参考这里：

CSS创建三角形（小三角）的几种方法

比较简单实用的还是使用border来创建三角形，今天主要研究这个的实现
将边框分别设置为红/黄/蓝/绿

.triangle {
    height: 0;
    width: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 40px 40px 40px 40px;
}

效果如下：

四个三角形合成一个正方形，大小为80x80，如果我们只想保留其中某个三角形的话，将其它的设置为透明即可，比如(以下css未改变部分与上面相同)

.triangle {
    border-color: #ff0000 transparent transparent transparent;
    border-width: 40px 40px 40px 40px;
}

效果：

IE6不支持transparent，所以不会透明而会显示难看的黑色，不过也有解决方法：将透明的部分对应的border-style设为dashed即可

.triangle {
    border-color: #ff0000 transparent transparent transparent;
    border-style: solid dashed dashed dashed;
    border-width: 40px 40px 40px 40px;
}

正方形按对角线平分为两个三角形的情况

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 0 0 40px 40px;
}

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 0 40px 40px 0;
}

需要指出的是，此时正方形的大小为40x40

如果将border-width的某一边设为0又会怎么样呢？也算是两种情况

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 40px 40px 0 40px;
}

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 40px 40px 40px 0;
}

结果是长方形，其中一边为80一边为40。宽度被设为0的边框对应方向的边框会形成较大的三角形，且长度加倍

segmentfault的"采纳"的显示其实也是用三角形实现的

上部分是包含"采纳"两个字的块状元素，设置position: relative。下部分用伪类after设置一个position: absolute的块状元素，将两者接在一起。通过border-width设置成长方形而不是正方形，再将下方的三角形去掉即可，看下面的css十分明显，这也是三角形的一个很好的应用

.accepted-flag:after {
    position: absolute;
    left: 0;
    top: 25px;
    content: "";
    border-width: 9px 18px;
    border-style: solid;
    border-color: #009a61 #009a61 transparent #009a61;
}

云服务器 GPU云服务器画三角形 html画三角箭头 css三角形 css三角

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

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

如何用css画三角形

摘要：那问题来了，如何用来画三角形呢别着急，先来看看我所遇到过的三角形。如下图，有实心三角形，空心的，还有可以归为三角形的小箭头。画一个三角形，首先想到的是如何画三角形的形状，然后给一个背景颜色。在设计稿中，经常会出现好多三角形，如果将三角形变成图片，通过img标签的src或者background中的url来访问，从前端性能方面来看这并不好。那问题来了，如何用css来画三角形呢？别着急，先...

Yuqi 2019-08-30 13:06 评论0 收藏0
使用CSS画三角形

摘要：说到这里，大家该明白了上面的三角形图标是怎么来的了吧元素没有下边框，而左右边框又是透明的，相当于只有上图中的上面的黑色三角形部分。所以，如果我们要做倒立三角形向右的或者向左的三角形，只需要为三角形底部设置边框，两腰边框透明即可。原文 http://itindex.net/detail/487...三角形-图标网页中经常有一种三角形的图标，鼠标点一下会弹出一个下拉菜单之类的（之前淘...

lifesimple 2019-08-29 11:07 评论0 收藏0
用CSS画一个带阴影的三角形的示例代码

摘要：思路怎么用画一个带阴影的三角形呢有童鞋说这还不简单吗网上有很多解决方案但其实大多都是实现不太完美的存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种通过边框控制和设为透明设为预定的颜色即可通过旋转盒子方法一可以画三角形但是1. 思路怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一...

chunquedong 2019-04-23 11:43 评论0 收藏0
纯CSS画三角原理解析

摘要：纯画三角原理解析因为之前做一个页面出现了很多三角，开始直接用图片感觉并不是很好用，看着总是怪怪的颜色还很难调整的跟背景一样，就搜了一波代码直接用上了，事后想了一下感觉不知道具体原理是什么，很奇怪为什么边框能设置成三角的样式。纯CSS画三角原理解析因为之前做一个页面出现了很多三角，开始直接用图片感觉并不是很好用，看着总是怪怪的颜色还很难调整的跟背景一样，就搜了一波代码直接用上了，事后...

lidashuang 2019-08-30 14:03 评论0 收藏0
css 实现各种基本图形

摘要：三角形三个角分别是，此时画五角星等价于画三个三角形。所以理论上，通过控制一个三条的长度，进而实现不同大小的三角形是可行。实践了一番，由于很难得到一个整数值，所以通过这种方法画正五角形几乎是无法实现的。三角形写 css 的时候，用惯了背景图，忽略了 css 本身其实可以实现很多简单的基本图形，比如三角形： .triangle { border-style: solid; ...

Elle 2019-08-30 13:21 评论0 收藏0