DIV+CSS production with arrow cue box effect Diagram (original article)

have been watching the works of station friends, today also to share a small effect, the first return a little nervous, language expression ability is not very good, please forgive me ... ^

Let's start with a simple one.

It was amazing when I first saw it on the Internet, and when I tried to write it, I found it, wow! Originally so simple, my head melon did not respond to come over, so tidy up under the way to simplify sharing out, hope to everyone helpful.

<div class= "Demo" ></div>

<style>
. demo{
width:0;
height:0px;
border:100px solid Transparent;
Border-color: #f00 #ff0 #05f #0f0;
}
</style>

OK, directly set the size of a border, and then the color order: up, right, down, left;

And then the second one, which is made up of 3 tags, or first:

The source code is posted here first:

<div class= "Demo" >
<div class= "Out" ></div>
<div class= "in" ></div>
</div>

First use a large div to set the border style, relative positioning, the style is as follows:

. demo{
width:200px;
height:200px;
border:2px solid #f30;

position:relative;
}

Next is the small arrow above, if it is solid with a label on it, this is hollow, so I used two tags

Write the arrow-like style first

. out,.in{
Position:absolute;
width:0;
height:0px;
}

Next is the arrow border, which is the out label here

. out{
border:20px solid Transparent;
Border-bottom-color: #f30; * * The color must be the same as the above demo border color */
top:-40px;
left:20%;
}

If it's a solid arrow, you can do that.

Then continue to turn the arrow into hollow, the principle of the same as the above solid, just want to make it smaller, position shifted, color and the demo background color is OK;

. in{
border:18px solid Transparent;
Border-bottom-color: #fff; * * Color must be the same as the demo background color * *

top:-35px;
left:21%;
}

Such a style with an arrowhead border is finished, is not very simple, welcome to add, welcome advice!

Http://www.zcool.com.cn/article/ZMTU2NTky.html

Div+css making arrow box with arrows (original article)