css如何将div画成三角形

1、先看一段代码：

#div1{height: 100px;border-style: solid;border-width: 100px 100px 100px 100px;border-color: red forestgreen blue cyan;width: 100px;}

根据代码渲染，显示效果如下（边框颜色border-color四个值默认的加载方向，top right bottom left）：

根据css代码，边框的宽度都是100px，div高度和宽度也是100px，但是这个和三角形有什么关联吗？

2、再看一个图，我们把div宽度和高度设置为0。

#div1{border-style: solid;border-width: 100px 100px 100px 100px;border-color: red forestgreen blue cyan;width: 0px;height: 0px;}

浏览器就渲染出如下图片：

咦，每个边都是三角形？（可以试试只把div高宽其中一个设置为0，另一个100px）

既然有三角形了，下面就好办了。比如我要蓝色的三角形，把其它三个边颜色都去掉不就可以了嘛：

#div1{border-style: solid;border-width: 100px 100px 100px 100px;border-color: transparent transparent blue transparent;width: 0px;height: 0px;}

蓝色三角形不就得到了。

3、审查元素一看，问题就出来了：

虽然其它三个边都隐藏了，位置还在，怎么把多余的位置去掉呢？

4、去掉多余的位置

设置border-width第一个值为0px试试：

#div1{border-style: solid;border-width: 0px 100px 100px 100px;border-color: transparent transparent blue transparent;width: 0px;height: 0px;}

查看元素已经完全是三角形的高度了

至此三角形就完成了。

5、那想其它三角形，应该怎么办？

蓝色三角形（bottom）其实从它的顶点垂直下来一条线为准，将蓝色三角形分为左右两个小三角形，左边小三角形底边受left值影响，右边小三角形底边受right值影响。

原文：css如何将div画成三角形 - 黑衣帽子 - 博客园

css如何将div画成三角形相关推荐

html div三角形,css+div打造三角形(箭头)
在很多网站都见过这样的箭头 ,之前我一直以为是图片,直到今天才知道原来可以用css做.开始看代码没太看懂,后来自己试了几遍才恍然大悟.贴出来分享下.(大神请直接忽略) 先看代码: HTML部分就是一个 ...
CSS实现带阴影效果的三角形
目标效果用将width和height设置为0,通过border特性来实现三角形的效果的方法,想必很多人都实现过. 但是如果要求三角形边缘具有阴影效果,这样一来以前的实现方式显然是不行,因为box-s ...
CSS 如何用border绘制三角形、等腰梯形、直角梯形
CSS 如何用border绘制三角形.等腰梯形.直角梯形 border 有宽度后,四角交接处会产生斜线,可根据此原理绘制三角形.等腰梯形.直角梯形等图形. div {width: 50px;heigh ...
前端学习之路—用css画一个圆形，三角形，椭圆
用css画一个圆形,三角形,椭圆一.圆形 css代码如下: <!DOCTYPE html> <html lang="en"> <head>&l ...
CSS边框外的小三角形+阴影效果的实现。
本文转载于:猿2048网站CSS边框外的小三角形+阴影效果的实现. ...虽然是一个很小的问题,但其实还是挺实用的. 实现一个边框外的角. 用纯CSS来写. 一开始实现的效果是这个样子的. 但是这个效 ...
在html中如何使用span,如何在HTML和CSS中使用DIV和span？
本文将帮助您理解和使用在css和HTML中如何使用"div"和"span",并用CSS对它们进行样式化.使用"div"的主要目的是将主体分成 ...
html页面设置不可点击事件,css怎么设置div不可点击？
这篇文章介绍的是通过纯CSS实现禁止div的鼠标点击事件,比起Javascript来更加灵活,有需要的可以参考学习. css怎么设置div不可点击? JavaScript有一个preventDefau ...
CSS实现半透明div层的方法
很不错的CSS透明效果,本实例是用CSS控制外层DIV不透明,而内层DIV透明,这样实现的效果是意想不到的,还不错吧,其实代码也是很简单的,也很好理解,主要是用了CSS的滤镜. <html xm ...
[css] 写出div在不固定高度的情况下水平垂直居中的方法？
[css] 写出div在不固定高度的情况下水平垂直居中的方法? 我知道的有两种方法<!DOCTYPE html> <html><head><meta char ...