有没有办法为带边框的按钮创建css尖角？

Question

有没有办法在css中创建这样的按钮？与＃34;博客＆＃34;文本。我尝试在每个角落添加一个div，给这些divs边框并旋转它们，但正如你所看到的那样（Anout Me btn）它不是最好的解决方案，因为角落不能准确适合。

感谢您的想法！

Answer 1

没有CSS规则可以做到，但它是可能的。您的按钮需要inline-block或block元素，左侧和右侧有边框。然后，您需要在容器的顶部和底部放置（使用absolute定位）两个伪元素::before和::after。只需添加透视并相应地旋转元素的X值，您就可以了。它可能不是像素完美＆＃34;在每台设备上，但它在最近的设备和浏览器上看起来都非常接近。

你可以看看我刚才做的这些六角形按钮，以便更好地了解：'passing by reference'

编辑：这是代码段，而不是Codepen链接：

＆＃13;

＆＃13;

*, *::before, *::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  transition: .25s all .02s ease-in-out;
}

body, html {
  text-align: center;
  font-family: sans-serif;
  font-size: 32px;
  background-color: #123143;
  height: 100%;
}

.button--hexagon {
  position: relative;
  margin: 1rem auto;
  text-align: center;
  font-size: .5rem;
  line-height: .5rem;
  vertical-align: middle;
  color: #ffce00;
  display: inline-block;
  border-width: 0;
  border-style: solid;
  border-color: #ffffff;
  padding: .5rem;
  cursor: pointer;
  background: transparent;
  width: calc(100% / 6);
}

.button--hexagon span {
  z-index: 20;
  position: relative;
}

.button--hexagon::before, .button--hexagon::after {
  content: '';
  position: absolute;
  border-color: inherit;
  border-style: inherit;
  height: 50%;
  width: 100%;
  left: 0;
  z-index: 10;
  background-color: rgba(18, 49, 67, 0.75);
}

.button--hexagon::before {
  border-width: 2px 2px 0 2px;
  top: 0;
  transform-origin: center bottom;
  transform: perspective(0.5rem) rotateX(3deg);
}

.button--hexagon::after {
  border-width: 0 2px 2px 2px;
  bottom: 0;
  transform-origin: center top;
  transform: perspective(0.5rem) rotateX(-3deg);
}

.button--hexagon:hover {
  color: #123143;
  border-color: #ffce00;
}

.button--hexagon:hover::before,
.button--hexagon:hover::after {
  background: #ffce00;
}

＆＃13;

<button class="button--hexagon"><span>Some text</span></button> 

＆＃13;

＆＃13;

＆＃13;

Answer 2

CSS不容易。您可以尝试使用CSS形状来获得粗略的相似性 - 但作为形状，您将无法准确地获得它，如果您的意图，您很可能无法对其进行适当的击打。

#octagon {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
}

#octagon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid red;
    border-left: 29px solid #eee;
    border-right: 29px solid #eee;
    width: 42px;
    height: 0;
}

#octagon:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid red;
    border-left: 29px solid #eee;
    border-right: 29px solid #eee;
    width: 42px;
    height: 0;
}