zoukankan      html  css  js  c++  java
  • 用CSS3和伪元素绘制三角形

    具体怎样的写法,参照右边链接:https://segmentfault.com/a/1190000002783179

    加以改良,不想多一个标签,可以直接利用伪元素,以下面代码为例所示:

    html代码:

     1                   <div class="box_finished">
     2                         <h6 class="f16 lh30">完成课程</h6>
     3                         <p class="c6 line_time">2015-11-01&nbsp;&nbsp;11:57:33</p>
     4                         <div class="fix mt15">
     5                             <a href="#" class="l" target="_blank"><img src="../pxb/02.jpg" alt="" width="86" height="68"></a>
     6                             <div class="l ml20 wd450">
     7                                 <a class="f14" href="#" target="_blank">期权套期保值交易策略</a>
     8                                 <p>为提示行业内人士对于选择权交易在套期保值功能方面的认知及操作能力,中国期货业协会及...</p>
     9                             </div>
    10                         </div>
    11                     </div>

    css代码:

     1 .box_finished {
     2     background: #f60 none repeat scroll 0 0;
     3     border-radius: 3px;
     4     margin: -10px 0 30px;
     5     padding: 10px;
     6     width: 580px;
     7 }
     8 
     9 .box_finished::before {
    10     border-bottom: 9px solid transparent;
    11     border-right: 9px solid #f88;
    12     border-top: 9px solid transparent;
    13     content: " ";
    14     display: block;//这个属性一定要加,如果不使用绝对定位的话
    15     height: 0;
    16     margin-left: -19px;
    17     width: 0;
    18 }

    效果图如下所示:

    之所以改成这么丑的搭配是为了方便辨认;更是为了方便以后自己工作时需要使用方便查找。

  • 相关阅读:
    Linux下nginx 的常用命令
    Mybatis generator 自动生成代码(2)
    Android Retrofit2 网路编程
    Android webView输出自定义网页
    Android Studio OkHttpClient使用
    Android Studio SVN使用
    Android Toolbar的使用 顶部标题栏+后退键
    Android DrawLayout + ListView 的使用(一)
    RabbitMQ配置与安装
    Struts2拦截器
  • 原文地址:https://www.cnblogs.com/anns/p/5303099.html
Copyright © 2011-2022 走看看