zoukankan      html  css  js  c++  java
  • 用边框写一个有尖角的图形

    效果图

    css:

    .wrap{
      display: flex;
      justify-content: center;
    }
    .label_item{
      display: flex;
      align-items: center;
    }
    .label_empty{
      width: 0;
      height: 0;
      border-bottom:17rpx solid transparent;
      border-right: 17rpx solid #d2d2d2;
    border-top: 17rpx solid transparent;
    position: relative;
    }
    .icon{
      display: block;
    width: 0;
    height: 0;
    border-bottom: 25rpx solid transparent;
    border-right: 25rpx solid #fff;
    border-top: 25rpx solid transparent;
    position: absolute;
    left: 2rpx;
    top: -24rpx;
    display: inline-block;
    }
    .idea{
        height: 26rpx;
        line-height: 26rpx;
        padding-left: 10rpx;
        padding-right: 10rpx;
        border: 1rpx solid #d2d2d2;
        font-size: 18rpx;
        color: #90c42f;
        border-left: none;
        display: inline-block;
        position: relative;
      }

    .wxml:

    <view class='wrap'>
        <view class='label_item'>
            <view class='label_empty'>
                <view class='icon'></view>
            </view>
            <view class='idea'>标签</view>
        </view>
    </view>
  • 相关阅读:
    qq
    构造方法
    Java模块化开发
    q
    qqq
    qq
    qqq
    Git服务器搭建及SSH无密码登录设置
    php面向对象中的魔术方法中文说明
    计算机中丢失 msvcr110.dll 怎么办
  • 原文地址:https://www.cnblogs.com/xiaoqi2018/p/10616803.html
Copyright © 2011-2022 走看看