纯CSS实现div三角效果

效果图:

方法一的效果图

方法二的效果图

方法三的效果图


方法一:

css代码:

  1. #top {  
  2.  positionabsolute;  
  3.  width0px;  
  4.  height0px;  
  5.  line-height0px;/*为了防止ie下出现题型*/  
  6.  border-bottom10px solid #89b007;  
  7.  border-left10px solid #fff;  
  8.  border-right10px solid #fff;  
  9.  left76px;  
  10.  top: -10px;  
  11. }  
  12. #first {  
  13.  border-radius:8px;  
  14.  -moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;-webkit-border-radius:8px;  
  15.  positionabsolute;  
  16.  height150px;  
  17.  width300px;  
  18.  background#89b007;  
  19.  left22px;  
  20.  top33px;  
  21. }  
  22. #first p{ padding:10pxline-height:1.5; color:#FFF;}  


html代码:
<div id="first">
<p>带背景颜色的小三角实现是比较简单的!</p>
  <span id="top"></span>
</div>


方法二:

css代码:

  1. * {  
  2. margin: 0;  
  3. padding: 0;  
  4. }  
  5. a{ color:#666text-decoration:noneline-height:25pxtext-indent:24px;}  
  6. .w{ width:200pxposition:absolutebackground:#999left:400pxtop:200pxfont-size:12pxtext-align:left}/*模拟灰色阴影背景层*/  
  7.   
  8. .x{ width:180pxposition:relativebackground:#fff;  border:1px solid #cccpadding:10pxleft:-4pxtop:-4px;}/*内容div*/  
  9. .y , .z{  
  10. positionabsolute;  
  11. left141px;  
  12. }  
  13. .y{  
  14. color#ccc;  
  15. font-size19px;  
  16. top:-12px;  
  17. z-index:1;  
  18. }/*模拟小三角*/  
  19.   
  20. .z{  
  21. color#fff;  
  22. font-size19px;  
  23. top:-11px;  z-index:3;  
  24. }/*模拟小三角*/  


html代码:
<div class="w">
  <div class="x">
    <p><a href="#">用面向对象的思想去书写css,用面向对象的心态去书写css。</a></p>
    <span class="z">◆</span> <span class="y">◆</span> </div>
</div>


方法三:

css代码:

  1. #content {  
  2. text-indent: 2em;  
  3. box-shadow: 0px 0px 10px #999;  
  4. padding10px;  
  5. font-size12px;  
  6. line-height: 1.5;  
  7. border-radius: 5px;  
  8. height100px;  
  9. width250px;  
  10. positionrelative;  
  11. margin200px auto;  
  12. border1px solid #CCC;  
  13. }  
  14.   
  15. span {  
  16. positionabsolute;  
  17. left25px;  
  18. height0px;  
  19. width0px;  
  20. }  
  21. /*上部小三角实现样式开始*/  
  22. span.out {  
  23. line-height: 0;  
  24. border-width10px;  
  25. border-colortransparent transparent #CCC transparent;  
  26. border-styledashed dashed solid dashed;  
  27. top: -20px;  
  28. }  
  29. span.iner {  
  30. border-width10px;  
  31. border-color#fff transparent #FFF transparent;  
  32. border-styledashed dashed solid dashed;  
  33. top: -19px;  
  34. line-height: 0;  
  35. }  
  36.   
  37. /*右部小三角实现样式开始*/  
  38. span.rightright {  
  39. background#FFF;  
  40. border-width1px;  
  41. width16px;  
  42. height16px;  
  43. border-color#CCC #CCC transparent transparent;  
  44. border-stylesolid solid dashed dashed;  
  45. left270px;  
  46. top30px;  
  47. border-radius: 0 0 100% 0;/*这里radius的值不要选取绝对值因为在放大或者缩小的过程中会产生封不住口的现象*/  
  48. line-height: 0;  
  49. box-shadow: 5px 0 10px #aaa;  
  50. }   

html代码:
<div id="content"> <span class="out"></span><span class="iner"></span> <span class="right"></span>
  <p>不管写什么内容,总之就是要实现无图小三角,要是有背景颜色那倒是极好的,没有的话也可以,就是稍微麻烦一点</p>
</div>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值