代码之家 › 专栏 › 技术社区 › Sammy

设计具有左尖边和右圆边的CSS按钮样式

css-selectors css

Sammy · 技术社区 · 7 年前

在@LGSon的回答后,用Safari截图再次更新:

感谢您的回答,但是下面的代码并没有产生正确的效果,我们可以清楚地看到SVG和 a

.divsclass {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 146 206'%3E%3Cdefs%3E%3Cstyle%3E.c1%7Bfill:%23fff;%7D.c2%7Bfill:none;stroke:%23a0310f;stroke-linecap:round;stroke-miterlimit:10;stroke-width:10px;%7D%3C/style%3E%3C/defs%3E%3Cpath d='M146 0H98.53l-1 .47-94 94a12 12 0 0 0 0 17l94 94L99 206h47z' class='c1'/%3E%3Cpath d='M113.18 28.2l-73 74.8 73 74.81' class='c2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

.divsclass a {
  color: red;
  text-transform: uppercase;
  background-color: white;
  margin-left: .75em;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 75%;
}

<div style="padding: 1em; background: black">
  <div class="divsclass"><a role="button">BACK</a></div>
</div>

我试图创建以下按钮,其中的文本(回到下面的示例中)可以是可变长度的。我正在尝试在左侧使用背景图像,在右侧使用边界半径,但它不起作用(使用 :before ). 有什么想法吗?

2 回复 | 直到 7 年前

Asons Oliver Joseph Ash 7 年前

这可以单独使用CSS和伪元素来实现

a {
  position: relative;
  display: inline-block;
  padding: 2px 10px 2px 20px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
  text-decoration: none;
}
a::before,
a::after {
  position: absolute;
  content: '';
  left: 0;
  top: 50%;
  width: 100%;
  padding-bottom: 100%;
  background: lightgray;
  transform: rotate(-45deg);
  transform-origin: left top;
  z-index: -1;
}
a::after {
  left: 5px;
  border: 1px solid black;
}

<a href="#">BACK</a>

已更新

span {
  display: inline-block;
  background-color: black;
  padding: 2px 10px 2px 20px;
}
a {
  position: relative;
  display: block;
  color: red;
  padding: 2px 10px 2px 0;
  text-transform: uppercase;
  background-color: white;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 75%;
}

a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -14px;
  height: 100%;
  width: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 146 206'%3E%3Cdefs%3E%3Cstyle%3E.c1%7Bfill:%23fff;%7D.c2%7Bfill:none;stroke:%23a0310f;stroke-linecap:round;stroke-miterlimit:10;stroke-width:10px;%7D%3C/style%3E%3C/defs%3E%3Cpath d='M146 0H98.53l-1 .47-94 94a12 12 0 0 0 0 17l94 94L99 206h47z' class='c1'/%3E%3Cpath d='M113.18 28.2l-73 74.8 73 74.81' class='c2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}

<span><a role="button">BACK</a></span>

Geff 7 年前

div.divsclass {
 border-radius: 15px 50px 30px 5px:
}