<!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. navicat 关于orcale新建表空间，用户和权限分配

    图文教程,直观, 上面连接数据库 下面创建表空间 建表空间的设置 表空间名的设置 新建用户 填写用户名,选择默认表空间 成员属性德设置,这里因为是自己用,所以选择最大权限,其他的权限这是需要专业的了 ...

  2. sql 的基础语句

    USE day15; -- 创建表CREATE TABLE teacher( id INT, NAME VARCHAR(20))-- 查看所有表SHOW TABLES; DESC student; D ...

  3. cassandra根据用户名密码登录cqlsh

     修改conf目录下cassandra.yaml文件 authenticator: PasswordAuthenticator //将authenticator修改为PasswordAuthentic ...

  4. Sleep 比对 (Win32API 与 STL )

    OutputDebugStringA("begin 1========"); for (int i = 0; i < 1800; i++) { Sleep(2); } Out ...

  5. bzoj4763

    $分块$ $一个很有趣的技巧$ $在树上选sqrt(n)个关键点,每两个关键点之间的距离<=sqrt(n),每个关键点属于一条链$ $预处理出每两个关键点的bitset$ $每次询问就暴力向上爬 ...

  6. stm32之复位与待机唤醒

    一.复位 stm32复位有三种类型,分别为系统复位.电源复位和备份域复位. 其中系统复位又分为: NRST引脚低电平(外部复位) 窗口看门狗计数结束 独立看门狗计数结束 软件复位 低功耗管理复位 二. ...

  7. 删除win7快捷方式小箭头

    删除win7快捷方式小箭头 reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Sh ...

  8. Windows下git的安装与配置

    表示git安装成功.

  9. HDU - 6113 2017百度之星初赛A 度度熊的01世界

    度度熊的01世界  Accepts: 967  Submissions: 3064  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 327 ...

  10. conntrack-tools使用

    基础用法 系统配置 ### 开启流数据包统计(packets和bytes) # echo "net.netfilter.nf_conntrack_acct=1" >> ...