<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title></title>

<meta name="description" content="">

<meta name="author" content="">

<link rel="stylesheet" href="css/style.css">

<style>

    /*向上*/

.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;

}

</style>

</head>

<body>

    <!-- 向上的三角形 -->

    <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>

</body>

</html>

页面效果图：

注：以上网上转载的效果，然后还是结合实际中用到的写法，偶觉得比较简洁的方法。

利用两个伪元素:before与:after为类名为.box_in_answer的元素添加小三角形：

.box_in_answer:before里的display:block很重要，一定要加；.box_in_answer的父元素也一定要加:position:relative。
.box_in_answer:before{content:" ";display:block;width:;height:;border-width:0 10px 10px;border-style:solid;border-color:transparent transparent #c4c4c4;position:relative;margin-top:-15px}

.box_in_answer:after{content:" ";display:block;width:;height:;border-width:0 9px 9px;border-style:solid;border-color:transparent transparent #f9f9f9;position:absolute;top:32px;left:7px;}

.box_in_answer{border:1px solid #c4c4c4;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;color:#346ab4;font-size:14px;line-height:30px;padding:5px}

页面效果：

巧用伪元素绘制带边的三角形--CSS3的更多相关文章

  1. 用CSS3和伪元素绘制三角形

    具体怎样的写法,参照右边链接:https://segmentfault.com/a/1190000002783179 加以改良,不想多一个标签,可以直接利用伪元素,以下面代码为例所示: html代码: ...

  2. css伪元素before/after和画三角形的搭配应用

    想要实现的效果如下: 第一步:如何用css画出三角形? /* css画三角形 */ .sanjiao{ ; border-top:40px solid red; border-bottom:40px ...

  3. Effective前端4：尽可能地使用伪元素

    伪元素是一个好东西,但是很多人都没怎么用,因为他们觉得伪元素太诡异了.其实使用伪元素有很多好处,最大的好处是它可以简化页面的html标签,同时用起来也很方便,善于使用伪元素可以让你的页面更加地简洁优雅 ...

  4. CSS选择器之伪类选择器（伪元素）

    selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...

  5. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  6. 使用JS控制伪元素的几种方法

    一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":b ...

  7. 关于伪类“:pseudo-class”和伪元素“::pseudo-element”的常见应用

    伪类用于指定要选择的元素的特殊状态,向其添加特殊的效果,比如: input { width: 515px; height: 50px; padding: 10px 20px; border: 1px ...

  8. css常用属性初总结:伪元素和伪元素

    前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...

  9. ::before ::after CSS3中的伪类和伪元素

    ::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...

随机推荐

  1. AR/VR-VR-Info-Micron-Insight：虚拟现实开辟心理健康新途径

    ylbtech-AR/VR-VR-Info-Micron-Insight:虚拟现实开辟心理健康新途径 1.返回顶部 1. 虚拟现实开辟心理健康新途径 全国心理疾病联盟最近发表的一份报告揭示了惊人的统计 ...

  2. Nuget：template

    ylbtech-Nuget: 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech.c ...

  3. Docker入门（一）：简介

    这个<Docker入门>系列文档,是我根据Docker官网(https://docs.docker.com)的帮助文档大致翻译而成.主要是作为个人学习记录.有错误的地方,Robin欢迎大家 ...

  4. POJ-3187

    Backward Digit Sums Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7634   Accepted: 43 ...

  5. python ：字符串，列表，元组，集合，字典

    字符串方法: 字符串是一个有序的,不可修改的,元素是以引号包围的序列.单引号,双引号,三引号,str生成 字符串的修饰   a='novo gene' a.center() 让字符串在指定的长度居中显 ...

  6. Unite 2017 干货整理 优化篇

    Unite 2017 干货整理 优化篇 2017年05月16日 将Unite 2017的一些演讲做了整理.  本篇有内存,CPU.GC.UI.渲染性能指标.Tips几个小节.  内容持续整理中. 内存 ...

  7. Windows CreateEvent，SetEvent，WaitForSingleObject的用法

    http://blog.pfan.cn/embed/19089.html WaitForSingleObject的用法 DWORD WaitForSingleObject(   HANDLE hHan ...

  8. poj3191(进制转换)

    题目链接:http://poj.org/problem?id=3191 题意:将一个数转换为-2为基数的数 思路:套路,看代码就好了 代码: #include <iostream> usi ...

  9. 洛谷P1556 幸福的路

    P1556 幸福的路 题目描述 每天,John都要为了农场里N(1≤N≤10)头牛的健康和幸福四处奔波. 每头牛的位置可以描述为一个二维坐标,John从坐标原点(0,0)出发.为了使路径更有趣,Joh ...

  10. CF961G Partitions（第二类斯特林数）

    传送门 对于每一个元素,我们只要能求出它的出现次数\(sum\),那么每个元素的贡献都是一样的,最终的答案为\(sum\times \sum_{i=1}^n w_i\) 那么分别讨论 如果这个元素自己 ...