<!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. 虚拟机ubuntu和windows共享文件

    设置虚拟机ubuntu和windows共享文件(方便复制文件到本机) (需要安装samba)   登陆ubuntu系统后,点击左边的文件夹.右击新建个文件夹.   设置为共享   ubuntu会提示你 ...

  2. C# FileStream Write追加写入文本

    该例子为追加 C盘中的 file1.txt 的文本内容 完整代码如下: 引入命名空间: [csharp] view plain copy print? using System.IO; 完整代码: [ ...

  3. Struts2返回JSON数据的具体应用范…

    Struts2返回JSON数据的具体应用范例 博客分类: Struts2 Struts2JSON  早在我刚学Struts2之初的时候,就想写一篇文章来阐述Struts2如何返回JSON数据的原理和具 ...

  4. 使用BIND安装智能DNS服务器（一）---基本的主从DNS服务器搭建

    参考网址:http://www.unixmen.com/dns-server-installation-step-by-step-using-centos-6-3/ DNS(Domain Name S ...

  5. ASP.NET web application中的redirect

    在开发ASP.NET MVC web application过程中,开发上线了新系统后,需要把老系统的url redirect新系统下 其中在项目系统目录下有一个文件 301RedirectsPage ...

  6. Android下如何计算要显示的字符串所占的宽度和高度

    Rect bounds = new Rect(); String text = "Hello World"; TextPaint paint; paint = findViewBy ...

  7. GTK学习笔记之Linux下Gtk环境搭建

    下面介绍下Ubuntu 环境下具体的安装过程: 1.配置安装gcc/g++/gdb/make 等基本编程工具(必须装好) 刚装好的Ubuntu系统中已经有GCC了,但是这个GCC几乎什么文件都不能编译 ...

  8. Golang : pflag 包简介

    笔者在前文中介绍了 Golang 标准库中 flag 包的用法,事实上有一个第三方的命令行参数解析包 pflag 比 flag 包使用的更为广泛.pflag 包的设计目的就是替代标准库中的 flag ...

  9. 能量项链 洛谷P1063

    1154 能量项链 2006年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 在Mars星球上,每个M ...

  10. 洛谷 P2048 [NOI2010]超级钢琴（优先队列，RMQ）

    传送门 我们定义$(p,l,r)=max\{sum[t]-sum[p-1],p+l-1\leq t\leq p+r-1 \}$ 那么因为对每一个$p$来说$sum[p-1]$是一个定值,所以我们只要在 ...