CSS 的出现让网页有了更多的风格，尤其是 CSS3 的应用，让网页呈现了更多好看的效果，那么，css3 中可以有哪些效果呢？如何使用 CSS3 来画一个三角形经常令人非常感到困惑，其实原理上是宽度相等的边距以 45 度来连接。好了原理我们了解了，那么我们就实战一下吧，来实现带小三角形的 div 框。
第一步：新建一个 div
- <div class="arrow-up">
- <!--向上的三角-->
- </div>
- <div class="arrow-down">
- <!--向下的三角-->
- </div>
- <div class="arrow-left">
- <!--向左的三角-->
- </div>
- <div class="arrow-right">
- <!--向右的三角-->
- </div>
第二步：新建 CSS3
下面用 CSS3 分别实现向上、下、左、右的三角形
- /*箭头向上*/
- .arrow-up {
- width:0;
- height:0;
- border-left:30px solid transparent;
- border-right:30px solid transparent;
- border-bottom:30px solid #fff;
- }
- /*箭头向下*/
- .arrow-down {
- width:0;
- height:0;
- border-left:20px solid transparent;
- border-right:20px solid transparent;
- border-top:20px solid #0066cc;
- }
- /*箭头向左*/
- .arrow-left {
- width:0;
- height:0;
- border-top:30px solid transparent;
- border-bottom:30px solid transparent;
- border-right:30px solid yellow;
- }
- /*箭头向右*/
- .arrow-right {
- width:0;
- height:0;
- border-top:50px solid transparent;
- border-bottom: 50px solid transparent;
- border-left: 50px solid green;
- }
实现效果如图
好了原理我们了解了，那么我们就实战一下吧，来实现带小三角形的 div 框。
HTML 代码
- <div class="entry">
- <div class="entry-trangle"><!--本Div只来实现三角形，无其他作用--></div>
- hello，我出生了<br/>
- hello，我出生了<br/>
- hello，我出生了<br/>
- hello，我出生了<br/>
- </div>
挂载有类"entry-trangle"的 div 只用来实现小三角形。对这个 div 用 css3 的 transparent 实现三角形，然后绝对定位、设置 z-index:-1;、margin-left:-19px;，看下面 css 代码：
- <style type="text/css">
- *{margin:0;padding:0;}
- body{
- background:#666;
- font:14px/20px "Microsoft YaHei";
- }
- .entry{
- margin:0 auto;
- margin-top:20px;
- width:280px;
- background:#fff;
- padding:10px;
- /*设置圆角*/
- -webkit-border-radius:5px;
- -moz-border-radius:5px;
- border-radius:5px;
- }
- .entry-trangle{
- position:absolute;
- margin-left:-19px;
- width:0;
- height:0;
- border-top:10px solid transparent;
- border-bottom:10px solid transparent;
- border-right:10px solid #fff;
- z-index:-1;
- }
- </style>
border-radius:5px;用来实现圆角；绝对定位、z-index:-1;的目的都是使控制小三角形的 div 在最底层，不影响父级 div 里面的内容布局。
