带有按钮CSS上的尖角的圆角

Question

我正在考虑在按钮之前和之后使用伪元素来实现此圆角三角形（旋转）和尖角。参见照片以获得所需结果。任何帮助深表感谢。谢谢！

Answer 1

您可以尝试以下操作：

$rsi = array();
foreach ( $data as $a )
{
    $rsi[] = $a['close'];
}
$rsi = trader_rsi( $rsi , 14 );
print_r( $rsi );

.box {
  width:300px;
  height:80px;
  --c:#000;
  position:relative;
  line-height:80px;
  font-size:20px;
  text-align:center;
  color:#fff;
  z-index:0;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:-1;
}
.box:before {
  border-radius:60px 60px 0 0;
  background:linear-gradient(to bottom,var(--c) 50%,transparent 0);
}
.box:after {
  border-radius:0 0 60px 60px;
  background:linear-gradient(to top,var(--c) 50%,transparent 0);
}

Answer 2

检查。

.padding { padding: 20px 50px }
.box {
    float: left;
    width: 70px;
    height: 51px;
    background: #aaa;
    color: #FFF;
    position: relative;
    font-size: 12px;
}
.box:before {
    position: absolute;
    top: 4px;
    left: -23px;
    content: "";
    display: block;
    width: 44px;
    height: 43px;
    background: #aaa;
    border-bottom-right-radius: 21px;
    border-top-left-radius: 20px;
    -ms-transform: rotate(45deg) skew(8deg, 8deg);
    -webkit-transform: rotate(45deg) skew(8deg, 8deg);
    transform: rotate(45deg) skew(8deg, 8deg);
}
.box:after {
    position: absolute;
    top: 4px;
    right: -23px;
    content: "";
    display: block;
    width: 44px;
    height: 43px;
    background: #aaa;
    border-bottom-right-radius: 21px;
    border-top-left-radius: 20px;
    -ms-transform: rotate(45deg) skew(8deg, 8deg);
    -webkit-transform: rotate(45deg) skew(8deg, 8deg);
    transform: rotate(45deg) skew(8deg, 8deg);
}

<div class="padding">
<div class="box"></div> 
</div>