css圆角梯形

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<code-pre class="code-pre" id="pre-QP2iJ7"><code-line class="line-numbers-rows"></code-line>.tabs-item { <code-line class="line-numbers-rows"></code-line>  position: relative; <code-line class="line-numbers-rows"></code-line>  width: 77px; <code-line class="line-numbers-rows"></code-line>  height: 32px; <code-line class="line-numbers-rows"></code-line>  line-height: 32px; <code-line class="line-numbers-rows"></code-line>  padding: 0; <code-line class="line-numbers-rows"></code-line>  text-align: center; <code-line class="line-numbers-rows"></code-line>  color: #333; <code-line class="line-numbers-rows"></code-line> <code-line class="line-numbers-rows"></code-line>  &::after { <code-line class="line-numbers-rows"></code-line>    content: ''; <code-line class="line-numbers-rows"></code-line>    position: absolute; <code-line class="line-numbers-rows"></code-line>    top: 4px; <code-line class="line-numbers-rows"></code-line>    left: 7px; <code-line class="line-numbers-rows"></code-line>    right: 6px; <code-line class="line-numbers-rows"></code-line>    bottom: 5px; <code-line class="line-numbers-rows"></code-line>    background: #fff; <code-line class="line-numbers-rows"></code-line>    border: 1px solid #ddd; <code-line class="line-numbers-rows"></code-line>    border-radius: 6px 6px 0 0; <code-line class="line-numbers-rows"></code-line>    transform: perspective(10px)scale(1.1, 1.3) rotateX(5deg); <code-line class="line-numbers-rows"></code-line>    z-index: -1; <code-line class="line-numbers-rows"></code-line>  } <code-line class="line-numbers-rows"></code-line> <code-line class="line-numbers-rows"></code-line>  &.is-active { <code-line class="line-numbers-rows"></code-line>    color: #fff; <code-line class="line-numbers-rows"></code-line> <code-line class="line-numbers-rows"></code-line>    &::after { <code-line class="line-numbers-rows"></code-line>      background: #1C4DBF; <code-line class="line-numbers-rows"></code-line>      border-color: #1C4DBF; <code-line class="line-numbers-rows"></code-line>    } <code-line class="line-numbers-rows"></code-line>  } <code-line class="line-numbers-rows"></code-line>} </code-pre>

　　

记录进步！！！

__EOF__

本文作者：沧澜野兽迈特丶凯
本文链接：https://www.cnblogs.com/sxdjy/p/17072547.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！