Principle:
Use the Border color overlay (block-level label inline) effect, take part of the pattern: if the side of the border removed, but also to form a half angle.
Code:
1234567891011121314151617181920 |
<!DOCTYPE html>
<
html lang
=
"en"
>
<
head
>
<
meta charset
=
"UTF-8"
>
<
title
></
title
>
<
style
>
.arrow{
display: inline-block;
border-top: 10px solid black;
border-right: 10px solid red;
border-bottom: 10px solid pink;
border-left: 10px solid blue;
/*想要哪边箭头,直接把另外三边的颜色改成透明:transparent.*/
}
</
style
>
</
head
>
<
body
>
<
div class
=
"arrow"
></
div
>
</
body
>
</
html
>
|
Effect:?
Half-width:
12345678< /td> |
.arrow{ display:inline-block; &NBSP;&NBSP;&NBSP;&NBSP; border-top:10px solid black; &NBSP;&NBSP;&NBSP;&NBSP; /*border-right:10px solid transparent;*/ &NBSP;&NBSP;&NBSP;&NBSP; border-bottom:10px solid transparent; &NBSP;&NBSP;&NBSP;&NBSP; border-left:10px solid transparent; &NBSP;&NBSP;&NBSP;&NBSP; /* want the arrow to change the color of the other three sides directly to transparent: transparent.*/ |
Half-width effect?:
From for notes (Wiz)
css--Arrow