有没有办法为带边框的按钮创建css尖角? [英] Is there a way to create css sharp corners for button with border?

问题描述

有没有办法在CSS中创建这样的按钮?一个带有博客"文本的网站.我尝试在每个角上添加一个div，为这些div设置边框并旋转它们，但是如您所见(Anout Me btn)，由于角不能正确拟合，这不是最佳解决方案.

is there a way to create such button in css? The one with "blog" text. I tried adding a div into each corner, giving these divs borders and rotating them, but as you can see (the Anout Me btn) it is not the best solution as the corners don't fit accurately.

谢谢您的想法！

推荐答案

虽然没有CSS规则，但是可以做到.您的按钮需要一个 inline-block 或 block 元素，左右两侧都有一个边框.然后，您需要在顶部和底部放置(以 absolute 定位)两个伪元素 :: before 和 :: after 的容器.只需添加透视图并相应地旋转元素的X值，就可以了.它可能并非在所有设备上都完美像素"，但在最新的设备和浏览器上看起来几乎完美.

There is no CSS rule to do it, but it is possible. You would need a inline-block or block element for your button, with a border on the left and right side. Then, you would need to place (with absolute positioning) two pseudo-elements ::before and ::after on the top and bottom part of the container. Simply add perspective and rotate the X value of the elements accordingly and you're good to go. It might not be "pixel perfect" on every device but it'll look damn near perfect on most recent devices and browsers.

您可以看一下我不久前制作的以下六角形按钮，以获得更好的主意:https://codepen.io/chriskirknielsen/pen/MpXKVV

You can have a look at these hexagonal buttons I made a little while ago to get a better idea: https://codepen.io/chriskirknielsen/pen/MpXKVV

这是一个代码段，而不是Codepen链接:

Here's a code snippet instead of a Codepen link:

*, *::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;
}

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

这篇关于有没有办法为带边框的按钮创建css尖角?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！