zoukankan      html  css  js  c++  java
  • 用css编写三角和半圆形状样式

    1.三角样式

    htriangle-down {
       height:0;
       border-left:11rpx solid transparent;
       border-right:11rpx solid transparent;
       border-top:12rpx solid #475669;
    }

    2.半圆

     html :

     <view class="user-divide">
          <view  class="user-divide-line"></view>
     </view>

    css:

    /* 下面的圆角 */
    .user-divide {
        position: relative;
        height: 40rpx;
        width: 90%;
        left: 5%;
        background: #fff;
    }
    .user-divide:before {
        left: -10rpx;
    }
    .user-divide:after {
        right: -10rpx;
    }
    .user-divide:before, .user-divide:after {
        position: absolute;
        top: 0;
        content: "";
        width:36rpx;
        height: 36rpx;
        background-color: #5AA2E7;
        border-radius: 50%;
    }
    .user-divide-line { position: absolute; top: 50%; margin-top: -1px; border-top: 1px dashed #E0E6ED; width: 90%; left: 5%; right: 5%; }

    3.字体后面的箭头

    /* 箭头 */
    
    .m-list-item.has-arrow::after {
      content: " ";
      display: inline-block;
      height: 18rpx;
      width: 18rpx;
      border-width: 2rpx 2rpx 0 0;
      border-color: #8492A6;
      border-style: solid;
      position: absolute;
      top: 50%;
      right: 30rpx;
    }
  • 相关阅读:
    day09
    day08
    day05
    day04
    day03
    day02
    LogCat查看Android运行日志
    ADT+SDK,Android开发环境搭建问题
    第二次冲刺周期第十天
    第二次冲刺周期第九天
  • 原文地址:https://www.cnblogs.com/yf-html/p/8881879.html
Copyright © 2011-2022 走看看