如何制作具有圆边和直边的 CSS 形状？

Question

期望的行为

我想在 CSS 中制作这个形状 - 它是菜单项的选项卡。

_{[带文字的示例]}

实现场景是一个HTML模板，其中CSS个样式表被切换以进行颜色变化等。

我想使用 CSS 来设置选项卡的样式而不是背景图像，这样我就不必为菜单项选项卡的每个主题版本创建特定的背景图像。

我试过的

我查看了一些 CSS 形状的网站并尝试将它们拉开并调整边框宽度等，但还没有得到想要的结果。下面是一些尝试。

.my_tab:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: 0px;
  border-width: 0 105px 25px 0;
  border-style: solid;
  border-color: transparent transparent blue;
}
.my_tab {
  position: relative;
  width: 104px;
  border-width: 20px 0 0 0;
  border-style: solid;
  border-color: red transparent;
  top: 50px;
}
.my_tab_two {
  background: purple none repeat scroll 0 0;
  height: 22px;
  position: relative;
  top: 150px;
  width: 104px;
}
.my_tab_two a {
  color: white;
  display: block;
  font-family: arial;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  width: 40px !important;
}
.my_tab_three {
  background: green none repeat scroll 0 0;
  border-radius: 0 5px 0 0;
  height: 15px;
  position: relative;
  top: 113px;
  width: 104px;
}
/* -------- */

p {
  font-family: arial;
}
.para_two {
  margin-top: 105px;
  position: absolute;
}

<p>attempt 01:</p>
<div class="my_tab"></div>
<p class="para_two">attempt 02:</p>
<div class="my_tab_two"><a href="#">link</a>
</div>
<div class="my_tab_three"></div>
<div class="my_tab_four"></div>

JSFiddle

http://jsfiddle.net/rwone/evz4d3mw/

Answer 1

您可以通过将 after 和 before pseudo-elements 放置在 pseudo-element 之后 skewed 来创建倾斜边缘。

注意：这可能不是我建议的最佳解决方案 svg

.tab{
  width:100px;
  height:100px;
  background:darkred;
  border-top-left-radius:15px;
  color:#fff;
  position:relative;
  padding:10px;
  border-left:5px solid #000;
  border-bottom:5px solid #000;
  border-top:5px solid #000;
  cursor:pointer;
  }
.tab:after{
  position:absolute;
  content:"";
  width:30%;
  height:50%;
  background:darkred;
  right:-30%;
  transform:skewY(45deg);
  top:11%;
  border-top:7px solid #000;
  border-right:5px solid #000;
  box-sizing:border-box;
  }

.tab:before{
  position:absolute;
  content:"";
  width:30%;
  height:60%;
  right:-30%;
  background:darkred;
  bottom:-5px;
  border-bottom:5px solid #000;
  border-right:5px solid #000;
  box-sizing:border-box;

<div class="tab">Some text</div>

SVG解决方案

.tab {
  width: 200px;
  height: 200px;
}

<div class="tab">
  <svg width="100%" height="100%" viewbox="0 0 100 100">
    <path d="m5 5 l 75 0 15 15 0 60 -90 0 z" fill="darkred" stroke="#000" stroke-width="5"/>
  </svg>

如何制作具有圆边和直边的 CSS 形状？

How to make a CSS shape with rounded and straight edges?

html

css

css-shapes