CSS - 创建圆角矩形

Question

有没有办法使用 CSS（不使用 Canvas 或 SVG）创建如图所示的圆形按钮？

编辑：我不是在谈论边界半径，请看图片

Answer 1

这可以使用:after 和:before :pseudo-elements。

div {
  position: relative;
  margin: 30px;
  width: 150px;
  height: 100px;
  background: #FF5656;
  border-radius: 1000px / 200px;
}
div:after, div:before {
  position: absolute;
  content: '';
  width: 10px;
  height: 72%;
  border-top-left-radius: 200px 1000px;
  border-bottom-left-radius: 200px 1000px;
  left: -6px;
  top: 14%;
  background: #FF5656;
}
div:after {
  border-radius: 0;
  border-top-right-radius: 200px 1000px;
  border-bottom-right-radius: 200px 1000px;
  left: calc(100% - 4px);
}

<div></div>

---

将这些边框应用于input 元素：

由于您不能将 :pseudo-elements 应用于 input 元素，因此您必须将 :after 和 :before :pseudo-elements 应用于其容器。

input {
  width: 150px;
  height: 100px;
  background: #FF5656;
  border-radius: 1000px / 200px;
  border: 0;
  cursor: pointer;
  color: black;
  font-size: 16px;
}
input::-moz-focus-inner {
  border: 0;
}
input:focus {
  outline: none;
}
.btn-container {
  position: relative;
  width: 150px;
  height: 100px;
  margin: 30px;
}
.btn-container:after,
.btn-container:before {
  position: absolute;
  content: '';
  width: 10px;
  height: 72%;
  border-top-left-radius: 200px 1000px;
  border-bottom-left-radius: 200px 1000px;
  left: -6px;
  top: 14%;
  background: #FF5656;
}
.btn-container:after {
  border-radius: 0;
  border-top-right-radius: 200px 1000px;
  border-bottom-right-radius: 200px 1000px;
  left: calc(100% - 4px);
}

<div class="btn-container">
  <input type="button" value="Button" />
</div>

---

正如 cmets 中提到的@misterManSam，您还可以使用button 元素来避免使用容器。

button {
  position: relative;
  width: 150px;
  height: 100px;
  background: #FF5656;
  border-radius: 1000px / 200px;
  border: 0;
  cursor: pointer;
  color: black;
  font-size: 16px;
}
button::-moz-focus-inner {
  border: 0;
}
button:focus {
  outline: none;
}
button:after,
button:before {
  position: absolute;
  content: '';
  width: 10px;
  height: 72%;
  border-top-left-radius: 200px 1000px;
  border-bottom-left-radius: 200px 1000px;
  left: -6px;
  top: 14%;
  background: #FF5656;
}
button:after {
  border-radius: 0;
  border-top-right-radius: 200px 1000px;
  border-bottom-right-radius: 200px 1000px;
  left: calc(100% - 4px);
}

<button>Button</button>

Answer 2

#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}

Answer 3

试试这个

<input type='button' class='rectangle' />

css

.rectangle{
width: 150px;
height: 100px;
background-color:red;
border:1px solid red;
border-radius: 25px;
}