Knowledge points: 1,: before 2, transparent 3, border width and height element in the case where the border set to 0 to achieve the effect
First, the: (? Any element) before adding content before the element's content may or may add a picture
Something like this: h1: before
{
content:url(logo.gif);
}
You can give h1: before setting property higher width
div::before{content:' ';
width:0px;
height:0px;
position:absolute;
left:-12px;
top:50%;
-webkit-transform:translate(0px,-50%);
border:6px solid rgba(0,0,0,0.7);
border-color:transparent rgba(0,0,0,0.7) transparent transparent
}
Two, transparent to transparent provided
Color Clear, beginning with a triangle css Videos used;
border-left:10px solid red;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
So long to get a triangle pointing to the right of the. Width and height set to 0.
Three, border block elements are provided when the width of 0, set the border effects are provided to display a different color is like this
div {
width:0;
height:0;
border-top: 10px solid red;
border-left: 10px solid yellow;
border-right: 10px solid green;
border-bottom: 10px solid pink;
border:6px solid;
/* border-color: transparent rgba(0,0,0,0.7) transparent transparent */
}
The following are the final results of the dialog would like to achieve
<body>
<Div> I is what I is what I is content </ div>
</body>
<style>
div{width:300px;
background-color:rgba(0,0,0,0.7);
color:#fff;
font-family:'Microsoft YaHei';
text-align:center;
padding:5px;
margin:100px auto;
position:relative
}
div::before{content:' ';
width:0px;
height:0px;
position:absolute;
left:-12px;
top:50%;
-webkit-transform:translate(0px,-50%);
border:6px solid rgba(0,0,0,0.7);
border-color:transparent rgba(0,0,0,0.7) transparent transparent
}
</style>
<script>
</script>
<style>
/* div {
width:0;
height:0;
border-top: 100px solid red;
border-left: 100px solid yellow;
border-right: 100px solid green;
border-bottom: 100px solid pink;
border:6px solid rgba(0,0,0,0.7);
border-color: transparent rgba(0,0,0,0.7) transparent transparent
} */
</style>