美文网首页
纯CSS写三角形-border法

纯CSS写三角形-border法

作者: BULL_DEBUG | 来源:发表于2017-12-07 23:34 被阅读50次

(1)有边框的三角形

我们来写下带边框的三角形。

image

如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属性，所以我们需要用到其他办法。

最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。

这里就涉及到一个绝对定位的问题，上、下、左、右四种方向的三角形相对于父级定位是不同的。首先我们来看下，当定位都为0（left:0px; top:0px;）时，会发生什么。

HTML：

<!-- 向上的三角形 -->
<div class="triangle_border_up">
    <span></span>
</div>
                                                      
<!-- 向下的三角形 -->
<div class="triangle_border_down">
    <span></span>
</div>
                                                      
<!-- 向左的三角形 -->
<div class="triangle_border_left">
    <span></span>
</div>
                                                      
<!-- 向右的三角形 -->
<div class="triangle_border_right">
    <span></span>
</div>

CSS:

/*向上*/
.triangle_border_up{
    width:0;
    height:0;
    border-width:0 30px 30px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_up span{
    display:block;
    width:0;
    height:0;
    border-width:0 28px 28px;
    border-style:solid;
    border-color:transparent transparent #fc0;/*透明 透明  黄*/
    position:absolute;
    top:0px;
    left:0px;
}
/*向下*/
.triangle_border_down{
    width:0;
    height:0;
    border-width:30px 30px 0;
    border-style:solid;
    border-color:#333 transparent transparent;/*灰 透明 透明 */
    margin:40px auto;
    position:relative;
}
.triangle_border_down span{
    display:block;
    width:0;
    height:0;
    border-width:28px 28px 0;
    border-style:solid;
    border-color:#fc0 transparent transparent;/*黄 透明 透明 */
    position:absolute;
    top:0px;
    left:0px;
}
/*向左*/
.triangle_border_left{
    width:0;
    height:0;
    border-width:30px 30px 30px 0;
    border-style:solid;
    border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
    margin:40px auto;
    position:relative;
}
.triangle_border_left span{
    display:block;
    width:0;
    height:0;
    border-width:28px 28px 28px 0;
    border-style:solid;
    border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */
    position:absolute;
    top:0px;
    left:0px;
}
/*向右*/
.triangle_border_right{
    width:0;
    height:0;
    border-width:30px 0 30px 30px;
    border-style:solid;
    border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_right span{
    display:block;
    width:0;
    height:0;
    border-width:28px 0 28px 28px;
    border-style:solid;
    border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/
    position:absolute;
    top:0px;
    left:0px;
}

效果如图：

image

为什么不是我们预想的如下图的样子呢

image

原因是，我们看到的三角形是边，而不是真的具有内容的区域，请回忆下CSS的盒子模型的内容。

image

绝对定位（position:absolute），是根据相对定位父层内容的边界计算的。

再结合上篇我们最开始写的宽高为0的空div:

image

这个空的div，content的位置在中心，所以内部三角形是根据中心这个点来定位的。

为了看清楚一些，我们使用上一次的方法，给span增加一个阴影：

box-shadow:0 0 2px rgba(0,0,0,1);

效果如图：

image

这回我们明确的知道了，内部的三角形都是根据外部三角形实际内容的点来定位的，而非我们肉眼看到的三角形的边界定位。

HTML不变，CSS：

/*向上*/
.triangle_border_up{
    width:0;
    height:0;
    border-width:0 30px 30px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_up span{
    display:block;
    width:0;
    height:0;
    border-width:0 28px 28px;
    border-style:solid;
    border-color:transparent transparent #fc0;/*透明 透明  黄*/
    position:absolute;
    top:1px;
    left:-28px;
}
/*向下*/
.triangle_border_down{
    width:0;
    height:0;
    border-width:30px 30px 0;
    border-style:solid;
    border-color:#333 transparent transparent;/*灰 透明 透明 */
    margin:40px auto;
    position:relative;
}
.triangle_border_down span{
    display:block;
    width:0;
    height:0;
    border-width:28px 28px 0;
    border-style:solid;
    border-color:#fc0 transparent transparent;/*黄 透明 透明 */
    position:absolute;
    top:-29px;
    left:-28px;
}
/*向左*/
.triangle_border_left{
    width:0;
    height:0;
    border-width:30px 30px 30px 0;
    border-style:solid;
    border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
    margin:40px auto;
    position:relative;
}
.triangle_border_left span{
    display:block;
    width:0;
    height:0;
    border-width:28px 28px 28px 0;
    border-style:solid;
    border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */
    position:absolute;
    top:-28px;
    left:1px;
}
/*向右*/
.triangle_border_right{
    width:0;
    height:0;
    border-width:30px 0 30px 30px;
    border-style:solid;
    border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_right span{
    display:block;
    width:0;
    height:0;
    border-width:28px 0 28px 28px;
    border-style:solid;
    border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/
    position:absolute;
    top:-28px;
    left:-29px;

效果如图：

image

进一步来写气泡框的三角形，如图所示：

image

HTML：

<div class="test_triangle_border">
    <a href="#">三角形</a>
    <div class="popup">
        <span><em></em></span>纯CSS写带边框的三角形
    </div>
</div>

CSS：

.test_triangle_border{
    width:200px; 
    margin:0 auto 20px;
    position:relative;
}
.test_triangle_border a{
    color:#333;
    font-weight:bold; 
    text-decoration:none;
}
.test_triangle_border .popup{
    width:100px;
    background:#fc0; 
    padding:10px 20px; 
    color:#333;  
    border-radius:4px;
    position:absolute; 
    top:30px; 
    left:30px;
    border:1px solid #333;
}
.test_triangle_border .popup span{
    display:block; 
    width:0; 
    height:0; 
    border-width:0 10px 10px; 
    border-style:solid; 
    border-color:transparent transparent #333; 
    position:absolute; 
    top:-10px; 
    left:50%;/* 三角形居中显示 */
    margin-left:-10px;/* 三角形居中显示 */
}
.test_triangle_border .popup em{
    display:block; 
    width:0; 
    height:0; 
    border-width:0 10px 10px; 
    border-style:solid; 
    border-color:transparent transparent #fc0; 
    position:absolute; 
    top:1px; 
    left:-10px;
}

(2)东北、东南、西北、西南三角形的写法

继续，来写西北方（↖），东北方（↗），西南方（↙），东南方（↘）的三角形。

原理如图：

image

根据颜色的划分，每个可以有两种CSS来写，分别利用不同的边来创造所需三角形。

写一个nw（↖）的例子：

HTML：

<div class="test_triangle_border">
    <a href="#">三角形</a>
    <div class="popup">
        <span><em></em></span>纯CSS写带边框的三角形
    </div>
</div>

CSS(1)：


.test_triangle_border{
    width:200px; 
    margin:0 auto 20px;
    position:relative;
}
.test_triangle_border a{
    color:#333;
    font-weight:bold; 
    text-decoration:none;
}
.test_triangle_border .popup{
    width:100px;
    background:#fc0; 
    padding:10px 20px; 
    color:#333;  
    border-radius:4px;
    position:absolute; 
    top:30px; 
    left:30px;
    border:1px solid #333;
}
.test_triangle_border .popup span{
    display:block; 
    width:0; 
    height:0; 
    border-width:0 10px 10px; 
    border-style:solid; 
    border-color:transparent transparent #333; 
    position:absolute; 
    top:-10px; 
    left:50%;/* 三角形居中显示 */
    margin-left:-10px;/* 三角形居中显示 */
}
.test_triangle_border .popup em{
    display:block; 
    width:0; 
    height:0; 
    border-width:0 10px 10px; 
    border-style:solid; 
    border-color:transparent transparent #fc0; 
    position:absolute; 
    top:1px; 
    left:-10px;
}

两种CSS效果均如图所示：

image

以上是利用CSS写三角形，晋级到

(1)有边框的三角形

(2)东北、东南、西北、西南三角形的写法

相关文章

  • 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形。 如果是一个正方形，我们写边时，会用到border，但我们这里讨论...

  • css制作三角形

    1. 用css的border属性制作三角形

  • 三角形气泡框

    用CSS写三角形，首先要理解的是border不是矩形，而是梯形。 但是如果把border的宽度改成30px呢？ 改...

  • CSS小技巧（一）

    一、使用 CSS 实现三角形的技巧 1、使用 border 绘制三角形：利用了高宽为零的容器及透明的 border...

  • 纯css绘制三角形

    利用css的border属性可以方便的绘制出三角形；

  • 【收藏】会经常用到的css小技巧

    三角形 倒三角形 虚线效果 css自带的border-style属性 dotted/ dashed . 效果展示出...

  • CSS 三角

    原理 盒子宽高为0，添加border，每边border可构成三角形 正三角 html css 非正三角 .box ...

  • Effective前端1---chapter 2 用CSS画一个

    1.CSS画三角形的画法 第一步：三角形可以用border画出来，首先一个有四个border的div长这样： ...

  • css 实现三角形箭头

    插入DOM 使用伪类 参考：用纯CSS实现的箭头CSS画三角形原理css整理 -- 右箭头，上下箭头，三角形 这个...

  • css技巧收集 2018-07-24

    一、css绘制三角形 {width: 0;height: 0;border-top: 50px solid tr...

网友评论

      本文标题：纯CSS写三角形-border法

      本文链接：https://www.haomeiwen.com/subject/iursixtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|纯CSS写三角形-border法|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！