Question

我们如何使用CSS制作这个形状？

我可以使用CSS编写下面的代码，但形状生成的输出有点偏。我们可以使用CSS吗？

.btn-arrow {
  width: 15px;
  height: 24px;
  border: 2px solid red;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  border-left: 0;
  display: inline-block;
  position: relative;
}

.btn-arrow:after,
.btn-arrow:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
}

.btn-arrow:after {
  border-right-color: white;
  border-width: 12px;
  margin-top: -12px;
}

.btn-arrow:before {
  border-right-color: red;
  border-width: 14px;
  margin-top: -14px;
}

body {
  padding: 20px;
}

<div class="btn-arrow"></div>

Answer 1

使用CSS，您可以实现这一目标。

只需创建::after和::before个伪元素，主框就会旋转45度。您可以调整linear-gradient部分而不是“右侧”句子的度数。

这个技巧是必要的，因为border-image和border-radius不能同时存在于同一个元素上。

您可以看到更多相关信息：

.shape {
  position:relative;
  width: 100px;
  border-radius: 100% 100% 100% 0;
  height: 100px;
  transform: rotate(45deg);
  margin: 0 auto;
  background: white;
  background-clip: padding-box;
}
.shape::after {
    position: absolute;
    top: -8px; 
    bottom: -8px;
    left: -8px; 
    right: -8px;
    background: linear-gradient(to right, #fe3870, #fc5d3e);
    content: '';
    z-index: -1;
    border-radius: 100% 100% 100% 0;
}
.shape::before {
    position: absolute;
    top: 8px; 
    bottom: 8px;
    left: 8px; 
    right: 8px;
    background: white;
    content: '';
    z-index: 1;
    border-radius: 100% 100% 100% 0;
}

<div class="shape">
</div>

Answer 2

CSS中许多可能的解决方案之一：

此解决方案只需要一个伪元素。

＆＃13;

.btn-arrow {
  width: 44px;
  height: 44px;
  border-top-right-radius: 40px;
  border-top-left-radius: 40px;
  border-bottom-right-radius: 40px;
  background: -webkit-linear-gradient(left, rgba(232,51,105,1) 0%,rgba(235,94,67,1) 100%); /* Chrome10-25,Safari5.1-6 */
  transform:rotate(45deg);
  position: relative;
}

.btn-arrow::after {
  display: block;
  width: 30px;
  height: 30px;
  border-top-right-radius: 40px;
  border-top-left-radius: 40px;
  border-bottom-right-radius: 40px;
  background: white;
  position: absolute;
  content: '';
  top: 7px;
  left: 7px;
}

body {
  padding: 20px;
}

＆＃13;

<div class="btn-arrow"></div>

＆＃13;

Answer 3

它可以用CSS完成，但它会涉及很多代码，尤其是渐变颜色和透明部分。您可以使用SVG轻松完成。

这是一个基本的例子：

body {
 background:#ccc;
}

<svg
  xmlns='http://www.w3.org/2000/svg'
  viewBox='0 0 64 64'
  width='250' height='250'>
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#fe2d67" />
      <stop offset="100%" stop-color="#fc5d3e" />
    </linearGradient>
  </defs>
  <path stroke="url(#grad)" fill="transparent" stroke-width="3" d='M34 26 C56 42 56 2 34 18 L28 22 Z' />
</svg>

这是一个有用的online tool，可以轻松编辑形状

Answer 4

将CSS调整为如下所示

.btn-arrow {
      width: 30px;
    height: 30px;
    border: 2px solid red;
    border-radius: 100%;
    border-left: 0;
    display: inline-block;
    position: relative;
}

.btn-arrow:after,
.btn-arrow:before {
  right: calc(100% - 6px);
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
}

.btn-arrow:after {
  border-right-color: white;
  border-width: 12px;
  margin-top: -12px;
}

.btn-arrow:before {
  border-right-color: red;
  border-width: 14px;
  margin-top: -14px;
}

body {
  padding: 20px;
}

我们如何使用CSS制作这种形状

4 个答案: