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

Question

所需行为

我想在CSS中创建这个形状 - 它是菜单项的标签。

_{[带文字的例子]}

实现方案是一个HTML模板，其中CSS样式表被切换以进行颜色更改等。

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

我尝试过的事情

我环顾了一些CSS形状的网站并尝试将它们分开并调整边框宽度等，但尚未能获得所需的结果。以下是一些尝试。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

的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>