CSS绘制图形

一、下三角

<div class="container">
    <div class="sanjiao"></div>
</div>

.container {
	position: relative;
    width: 588px;
    background: linear-gradient(to right, #ff5719, #f43019);
    border-radius: 10px;
}
.sanjiao {
    position: absolute;
    bottom: -10px;
    left: 50px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid red;
}

效果图

二、加减号

<!-- 减号 -->
<view class="flex-icon-reduce">
	<view class="reduce"></view>
</view>
<!-- 加号 -->
<view class="flex-icon-add">
    <view class="add-heng"></view>
    <view class="add-shu"></view>
</view>

.flex-icon-reduce {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48rpx;
    height: 48rpx;
    background: rgba(255,255,255,1);
    border-radius: 50%;
    border: 2rpx solid rgba(255,84,84,0.5);
    .reduce {
      width: 21rpx;
      height: 3rpx;
      background: rgba(255,3,3,1);
    }
  }
.flex-icon-add {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
    background: linear-gradient(141deg, rgba(247,4,14,1) 0%,rgba(255,52,0,1) 100%);
  .add-heng {
      position: absolute;
      margin: auto;
      width: 21rpx;
      height: 3rpx;
      background: white;
    }
    .add-shu {
      height: 21rpx;
      width: 3rpx;
      background: white;
    }
  }

效果