html如何绘制带尖角（三角）的矩形

结合实际情况自己写的：

.menu_triangle {
    height: 10px;
    width: 10px;
    background-color: #049888;
    transform: translate(75px, -5px) rotate(-45deg);
}
 

• 摘要：网上有很多html+css制作带三角的矩形的方法,我在这里列举其中一种,兼容bootstrap3。我们先来看一个三角在左边的对话框的效果图矩形就不必说了,矩形的border-radius也不用说了,圆角可以自己设置,可以直接用bootstrap中的类。下面说下矩形左边的小三角,我们可以这么设置。右边的矩形我们标记为类log-content,左边的小三角我定义为类triangle,在html中的代码是这样:<divclass="log-content"

• 网上有很多html+css制作带三角的矩形的方法,我在这里列举其中一种,兼容bootstrap3。

  我们先来看一个三角在左边的对话框的效果图 
  

  矩形就不必说了,矩形的border-radius也不用说了,圆角可以自己设置,可以直接用bootstrap中的类。下面说下矩形左边的小三角,我们可以这么设置。右边的矩形我们标记为类log-content,左边的小三角我定义为类triangle,在html中的代码是这样:

  <div class="log-content"> 增加一些特点啊神马的 如果想把 number的设置有两种方式 第一种是在数据库里设置然后显示 另外一种就是 </div><div class="triangle"></div>

  接下来看下css如何实现他们的无缝结合

  .triangle{ position:absolute; bottom:-6px; left:30px; overflow:hidden; width:13px; height:13px; background:#43B1F1; -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -o-transform:rotate(135deg); transform:rotate(135deg); left: -6px; top: 15px; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')"; filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.7071067811865475,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865475,SizingMethod='auto expand');}.log-content { position:relative; background:#43B1F1; border-radius:12px; text-align:left; color:white; padding: 20px;}

  这是利用css3的transform实现的。

  如果我想做一个三角在上面的对话框又该如何呢?

  

  这时候,仅需调整.triangle的css设置就好了

  .triangle{ position:absolute; overflow:hidden; width:13px; height:13px; background: white; display: none; -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -o-transform:rotate(135deg); transform:rotate(135deg); left: 47%; top: 48px; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')"; filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.7071067811865475,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865475,SizingMethod='auto expand');}

  通过改变left top bottom 的值,你会将小三角放到自己想要放的位置了。

以上是

html+css制作带三角的矩形

的内容，更多

三角矩形制作HTMLcss

的内容，请您使用右上方搜索功能获取相关信息。

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

方法二：

前些天在牛课网上看到了一个百度的面试题，题目如下：

请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：
<div id=”demo”></div>

刚看到这个题目觉得无从下手，感觉一般这种不都是一个背景图片吗，怎么还能用css写的?? 后来看到网友的答案，试着运行了一下发现真的和图上的一模一样，最伤心的是看到答案竟然还看不懂。。觉得自己还是好水，仔细琢磨了一下，现将心得整理一下：

实现图示的效果涉及到的知识主要有两点：一个是before、after伪元素，一个是border

1、before 和 after 都是css中的伪元素，他们俩用法都差不多，通过给定一个属性content给元素添加新的内容，不同的是before用来在元素前插入新内容，after用来在元素后面插入新内容。

比如有一个p元素：水

<p>水</p>
如果给这个p元素设置一个before：
p:before{
content:"上海自来";
}
这个p就变成了：上海自来水，content属性的值就添加到了p元素内容的前面。
相反的，如果是用after：

p:after{
content:"来自海上";
}
这个p就会变成：水来自海上。
简单的before、after使用就是这样，一开始看的时候觉得好简单，不就是插入个内容吗，但实际上插内容不算什么，最重要的是它能设！置！样！式！一旦给它设置各种各样的样式之后这个伪元素就厉害了，比如题目中的尖角，题目只给了一个div我们，但是很明显div只能弄出一个左边的带边框正方形，右边的尖角怎么来的呢，那就可以靠这个伪元素了。

思路很简单，先把正方形画出来，然后通过before或者after变出一个尖角出来，放到正方形右上角去。div如下：

#demo{
width:100px;
height:100px;
background-color:#fff;
border: 2px #000 solid;
}
好，这个时候正方形已经出来了，但是三角形怎么画出来呢，这就要用到border了

2、以前使用border都是border：1px #000 solid，顶多换换颜色和边框值，没想到画三角形也能靠它……

以前没发现的原因在于使用border的时候总是1px、2px的，太细了，当把边框变成20px的时候就有意思了，下面是一个边长10px的正方形设置其边框长也为10px：

我们知道可以通过设置border-left等等手动设置四个边框为不同颜色，分别设置之后：

马上看出靠谱，如果把这个div的宽度减小到0之后岂不就是四个三角形了，动手实验：

果然是，那把上下右的颜色变透明之后就能得到一个三角形拉，在这里要注意的是把其他三个边透明是能得到一个三角形的，但是如果只设置左边框而不设置其他三个边框是得不到的，自己动手试下便知，因为如果只设置左边框，而这个div的高度又为0，那这个左边框是不会向上下两端扩展的，只有当上或下也有边框时才会呈现出一个三角形，所以我们可以把所有边框透明掉，然后把左边框显示即可。比如下面这样：

diiv{
width:0px;
height:0px;
border: 20px transparent solid;
border-left-color: #000;
}
      就能得到这个效果了：

那把三角形放到正方形右侧就很简单了，有一点是那个正方形是缺了一段的，我们可以让三角形颜色为白色覆盖掉正方形的边框，另外再用一个黑色的比白色三角形大一点的三角形放在白三角形下面，这样就只漏出了三角形的两条边，所以这里同时用到了before和after。

因为before和after插入的三角形是放在指定的位置的，所以它们的position都设置为绝对定位，那么div就要设置成相对定位了：

#demo{
width:100px;
height:100px;
border: 2px #000 solid;
background-color:#fff;
position:relative;
}

首先是黑色的三角形：

#demo:before{
width:0px;
height:0px;
border: 10px transparent solid;
border-left-color: #000;
position:absolute;
top:20px;
left:100%;
content:""
}

注意content虽然没有值，但是必须得加上。现在效果如下：

然后是比黑色三角形小一点点的白色三角形：

#demo:after{
width:0px;
height:0px;
border: 8px transparent solid;
border-left-color: #fff;
position:absolute;
top:22px;
left:100%;
content:""
}
注意白色三角形比褐色三角形要小，所以边框长度就小2px，且top也大2px，效果如下：

由此这个题目就做完拉，当然相同的样式可以整理下，最终样式如下：

#demo{
width:100px;
height:100px;
border: 2px #000 solid;
background-color:#fff;
position:relative;
}
#demo:before, #demo:after{
width:0px;
height:0px;
border:transparent solid;
position:absolute;
left:100%;
content:""
}
#demo:before{
border-width:10px;
border-left-color: #000;
top:20px;
}
#demo:after{
border-width:8px;
border-left-color: #fff;
top:22px;
}