使用CSS倒铲的角落 [英] Inverted Scooped corners using CSS

问题描述

我有CSS代码

 #box {
  width: 200px;
  height: 50px;
  background-color: blue;
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  position: relative;
  margin: 30px;
  text-align: center;
  color: white;
  padding-top: 10px;
}

#box::before,
#box::after {
  content: "";
  width: 0;
  height: 0;
  right: 0;
  position: absolute;
}

#box::before {
  border-right: 10px solid blue;
  border-top: 10px solid blue;
  border-left: 10px solid transparent;
  border-bottom: 10px solid transparent;
  bottom: -20px;
}

#box::after {
  border-right: 10px solid blue;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid blue;
  position: absolute;
  top: -20px;
} 

 <div id="box">#box</div> 

具有类似

的形状

我需要的形状是

我需要曲线，而不是图像中右上角(#box::before)和右下角(#box::after)的三角形的斜边.

有什么方法可以使用纯CSS吗?

codesandbox 演示

谢谢

解决方案

您可以通过使用svg背景图像(如此代码段)轻松实现此目的.在这里，曲线可能不是您想要的方式，但是可以肯定的是，您可以根据需要更改svg中的路径.

 #box {
  width: 200px;
  height: 50px;
  background-color: blue;
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  position: relative;
  margin: 30px;
}

#box::before,
#box::after {
  content: "";
  width: 20px;
  height: 20px;
  right: 0;
  position: absolute;
}

#box::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 0 Q20 0 20 20 L20 0Z" /></svg>');
  bottom: -20px;
}

#box::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 20 Q20 20 20 0 L20 20Z" /></svg>');
  top: -20px;
} 

 <div id="box"></div> 

I have CSS code

#box {
  width: 200px;
  height: 50px;
  background-color: blue;
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  position: relative;
  margin: 30px;
  text-align: center;
  color: white;
  padding-top: 10px;
}

#box::before,
#box::after {
  content: "";
  width: 0;
  height: 0;
  right: 0;
  position: absolute;
}

#box::before {
  border-right: 10px solid blue;
  border-top: 10px solid blue;
  border-left: 10px solid transparent;
  border-bottom: 10px solid transparent;
  bottom: -20px;
}

#box::after {
  border-right: 10px solid blue;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid blue;
  position: absolute;
  top: -20px;
}

<div id="box">#box</div>

which gives some shape like

shape I need is

I need curved line instead of hypotenuse in triangles at top-right (#box::before) and bottom-right (#box::after) as in image.

Is there any way to achieve using pure CSS ?

codesandbox demo

Thanks

解决方案

You can easily achieve this by using svg background images like in this snippet. Here the curves may not the way you want but surely you can change the path in the svg to your needs.

#box {
  width: 200px;
  height: 50px;
  background-color: blue;
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  position: relative;
  margin: 30px;
}

#box::before,
#box::after {
  content: "";
  width: 20px;
  height: 20px;
  right: 0;
  position: absolute;
}

#box::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 0 Q20 0 20 20 L20 0Z" /></svg>');
  bottom: -20px;
}

#box::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 20 Q20 20 20 0 L20 20Z" /></svg>');
  top: -20px;
}

<div id="box"></div>

这篇关于使用CSS倒铲的角落的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！