<!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. ng2中router-outlet用法

    说明:router-outlet 是应用中的路由插座,一个页面中可以使用一个或多个router-outlet 1.只使用一个router-outlet 父组件: <router-outlet&g ...

  2. Openstack web 添加和删除按钮

    注:当前已经时候用smaba将openstack环境的源码共享到windows系统上,并使用pycharm进行代码编辑和修改(参见openstack开发环境搭建).如下图:

  3. JavaScript高级程序设计学习笔记第九章--客户端检测

    1.能力检测:能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力.(我的理解就是识别浏览器能做什么不能做什么) 2.怪癖检测:目标是识别浏览器的特殊行为.但与能力检测确认浏览器支持什么能力不同, ...

  4. day5 面向对象

    面向对象的特征 封装(encapsulation) 继承(inheritance) 多态(polymorphism) 开发的过程:其实就是不断的创建对象,使用对象,指挥对象做事情. 设计的过程:其实就 ...

  5. 2. nmap扫描神器总结

    -----------------nmap(选项)(参数)------------------O:激活操作探测: -P0:值进行扫描,不ping主机: -PT:是同TCP的ping: -sV:探测服务 ...

  6. monkey无规则压力测试

    例:monkey -p com.tencent.mtaexample -s 23  --throttle 100 --ignore-crashes --ignore-timeouts -v -v -v ...

  7. Linear Algebra - Matrix

    1. 矩阵 定义:有 \(m*n\) 个数 \(a_{ij}(i=1,2,\cdots,m; j=1,2,\cdots,n)\) 排成的 \(m\) 行 \(n\) 列的数表 \[ \begin{Bm ...

  8. 2017 Gartner Hype Cycle for Emerging Technologies: AI, AR/VR, Digital Platforms

  9. Spark 中的 checkpoint

    为了实现容错,需要做checkpoint.以Streaming为例,checkpoint中有两种数据: 1. Metadata checkpointing:用于恢复driver端出错的情况.其中包含: ...

  10. 洛谷P2899 [USACO08JAN]手机网络Cell Phone Network

    P2899 [USACO08JAN]手机网络Cell Phone Network 题目描述 Farmer John has decided to give each of his cows a cel ...