主页 / 问题 / 689904
Accepted
Fangog
Asked:2020-07-09 01:58:59 +0000 UTC2020-07-09 01:58:59 +0000 UTC

如何制作带有斜（梯形）边和圆角的渐变橡胶按钮？

  • 772

这是图片中的示例，如何做到这一点？最好在纯CSS中？

例子

html

2 个回答

  1. Best Answer

    更新。这是一个带有渐变、斜边和圆角的按钮。延伸内容。

    截屏

    在带有渐变的箭头的基础上制作。为了获得斜边，我在按钮后面隐藏了一个伪元素，并使用skewX. 为了使按钮拉伸，我将变换点移到角落，拉伸父元素上下边缘之间的伪元素，并赋予它与父元素相同的宽度。

    https://codepen.io/glebkema/pen/eRPgMP

    .btn-skew,
.btn-skew:before {
  border: 1px solid #4d7a9c; 
  box-sizing: border-box;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;

  background: #238fe7; /* Old browsers */
  background: -moz-linear-gradient(top,  #238fe7 0%, #156fba 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #238fe7 0%,#156fba 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #238fe7 0%,#156fba 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#238fe7', endColorstr='#156fba',GradientType=0 ); /* IE6-9 */ 
}

.btn-skew {
  border-left: none;
  color: white;
  font-size: 18px;
  margin-left: 20px;
  padding: 10px 14px 11px 10px;
  position: relative;
}

.btn-skew:before {
  content: '';
  display: block;
  position: absolute; top: -1px; right: 0; bottom: -1px;
  width: 100%;
  z-index: -1;
 
  -webkit-transform: skewX(-15deg);
     -moz-transform: skewX(-15deg);
      -ms-transform: skewX(-15deg);
       -o-transform: skewX(-15deg);
          transform: skewX(-15deg);
  -webkit-transform-origin: 0 0;
     -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
       -o-transform-origin: 0 0;
          transform-origin: 0 0;
}
    <button class="btn-skew">Кнопка</button>
<button class="btn-skew">Много разных слов</button>

    • 12

  2. 基于transform属性的实现

    .element {
  display:inline-block;
  position:relative;
  width:100px; height:40px;
  background-color:blue;
  border-radius:5px 5px 5px 0;
  padding-left:15px;
}
.element::before {
  position:absolute;
  top:0; bottom:0; left:-7.5px;
  width:15px;
  background-color:blue;
  border-radius:5px 0 0 7.5px;
  content:'';
  transform:skewX(-15deg);
}
body {
  margin:100px;
}
    <div class="element"></div>

    • 3

相关问题