純CSSで描かれた三角形矢印パターン【オリジナル】
4253 ワード
参照先:http://www.webhek.com/css-triangles/
上下左右の三角形矢印マークを使用して、直接cssで完成し、コードを直接添付します.
css:
div#up {
width: 0px;
height: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid#2f2f2f;
}
div#down {
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solidtransparent;
border-top: 20px solid #f00;
}
div#left {
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solidyellow;
}
div#right {
width: 0px;
height: 0px;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}html:
<div id="up"></div>
<div id="down"></div>
<div id="left"></div>
<div id="right"></div>効果図:
------------------------------------------------博主は1家の髪飾りの宝を洗う店を経営して、すべて純粋な手作りですよ、開業してドリルして、信用のためだけです!必要な親たちは来てもいいですよ.応援ありがとうございます!店名:小魚ニモ手作りアクセサリー店経営:ヘアアクセサリー、頭花、ヘアピン、イヤリングなど(手作り)ネットショップ:http://shop117066935.taobao.com/
---------------------------------------------------------------------