border做三角形

切页面~

border: 四个边都可以设置。border-top\border-right\bottom\left。

1. 四个边交汇的地方是怎么处理的呢？

平分~

.t1{
margin:30px;
height:100px;
width:100px;
border-top:solid 30px red;
border-left:solid 30px green;
border-right:solid 30px orange;
border-bottom:solid 30px blue;
}

2. 所以：如果当宽高都为零的时候呢？只有border起作用，四个边交汇，就会出现以下的状态了~

.t2{
margin:30px;
height:0px;
width:0px;
border-top:solid 100px red;
border-left:solid 100px green;
border-right:solid 100px orange;
border-bottom:solid 100px blue;
}

3. 所以，当只设置两个边的时候，如top和left，则默认其他值为0，这时相当于上左交汇，左上角被平分。

如：

.t3{
    margin: 30px;
    height: 0px;
    width: 0px;
    border-top: 100px solid red;
    border-left: 100px solid black;
}

4. 然后在此基础上，继续。如果设置第三条边为透明呢？

.t4{
    margin: 30px;
    height: 0px;
    width: 0px;
    border-top: 100px solid #F00;
    border-left: 100px solid #000;
    border-right: 100px solid transparent;
}

5. 可见border为0时，是不显示的，当设置另一个边为透明时，如right，则top被撑开，并占用了自己的平分位置。于是出现了一个很中正的三角形。

在此基础上，如果把left也设置成transparent，那是不是就会出现一个向下的箭头呢？

.t5{
margin: 30px;
height: 0px;
width: 0px;
border-top: 100px solid #F00;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}

6. 可见，要一个向哪个方向的箭头，只需要将其对立面设置一个显示的值，两边设置成透明就好了~~~

现在换个方向，向右。

.t6{
margin: 30px;
height: 0px;
width: 0px;
border-top: 100px solid transparent;
border-left: 100px solid #F00;
border-bottom: 100px solid transparent;
}

7. 果然啊~那么如果设置各种奇特的三角形，也就好说了，把长度改变下，是不是就可以了~~

那来几个吧~~

8. 然后触类旁通吧~

转载于:https://www.cnblogs.com/hanyuxinting/p/4701352.html

border做三角形相关推荐

用border做三角形
网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margi ...
怎么用css控制border成为三角形
布局div,并命名id="tri",用CSS来控制div,在style里面,使用border属性对div进行控制, #tri{ width: 0px; height: 0px; b ...
【css】巧用border制作三角形
#css用border制作三角形 1.利用CSS盒模型盒模型上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角调整宽高大小可以调节三角形形 ...
用border画三角形
<html> <head> <title>用border画三角形</title> <style>#one{width:0px;height: ...
CSS 如何用border绘制三角形、等腰梯形、直角梯形
CSS 如何用border绘制三角形.等腰梯形.直角梯形 border 有宽度后,四角交接处会产生斜线,可根据此原理绘制三角形.等腰梯形.直角梯形等图形. div {width: 50px;heigh ...
css做三角形横线加小三角,CSS创建三角形（小三角）的几种方法
你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...
前端CSS border实现三角形border-color
最近在写一个项目,然后想做一个带三角形的导航栏,然后突然发现自己还不知道前端怎么写出一个三角形(太菜了)... 然后本来打算用canvas画一个出来的,发现有点大材小用???然后百度才发现可以直接用b ...
border绘制三角形
(1)有边框的三角形我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
利用border制作三角形原理
网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...

border做三角形

border做三角形相关推荐

最新文章

热门文章