Question

我需要有关如何使按钮看起来像这样的想法：

我不知道如何制作这样的方角，我无法在线找到任何解决方案。此外，在悬停时，边框应该在按钮周围（只是一个普通的2px边框。）

Answer 1

这是一个使用绝对定位的伪元素的纯CSS解决方案，这意味着您不必创建任何图像。这个方法的作用实际上是在里面创建了四个元素按钮。这些元素位于四个角中的每一个角上，两边都有边框。

非幻想，没有过渡：（在悬停时为按钮添加边框）

＆＃13;

body {
    background-color: black;
}

button {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: white;
    padding: 0;
    box-sizing: content-box;
    border: 2px solid transparent;
}

button::before, button::after, span::before, span::after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
}

button::before {
    top: -2px;
    left: -2px;
    border-top: 2px solid white;
    border-left: 2px solid white;
}
button::after {
    top: -2px;
    right: -2px;
    border-top: 2px solid white;
    border-right: 2px solid white;
}
span::before {
    bottom: -2px;
    left: -2px;
    border-bottom: 2px solid white;
    border-left: 2px solid white;
}
span::after {
    bottom: -2px;
    right: -2px;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
}

button:hover {
  border: 2px solid white;
}

＆＃13;

<button><span>BUTTON</span></button>

＆＃13;

花式，有过渡：（为我们的伪元素设置动画以占据按钮的整个高度/宽度）

＆＃13;

body {
    background-color: black;
}

button {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: white;
    padding: 0;
    box-sizing: content-box;
    border: 2px solid transparent;
}

button::before, button::after, span::before, span::after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
}

button::before {
    top: -2px;
    left: -2px;
    border-top: 2px solid white;
    border-left: 2px solid white;
    transition: 0.5s all;
}
button::after {
    top: -2px;
    right: -2px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    transition: 0.5s all;
}
span::before {
    bottom: -2px;
    left: -2px;
    border-bottom: 2px solid white;
    border-left: 2px solid white;
    transition: 0.5s all;
}
span::after {
    bottom: -2px;
    right: -2px;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    transition: 0.5s all;
}

button:hover::before, button:hover::after {
    width: 50px;
    height: 50px;
}

button:hover span::before, button:hover span::after {
    width: 50px;
    height: 50px;
}

＆＃13;

<button><span>BUTTON</span></button>

＆＃13;

Answer 2

副手，我可以看到两种方法来做到这一点。

第一种方法是使用CSS的边框图像将图像切割成切片并将其用作边框。您将创建一个在左上角，右上角，左下角和右下角有四个方角的图像，然后控制图像如何分成九个象限。

这取决于您的源图像，但请参阅此处查看示例用法和示例图像： https://www.w3schools.com/cssref/css3_pr_border-image.asp

第二种方法是将四个元素放在按钮框之外。这是更多的工作而不是必要的，所以我会选择第一种方法。

Answer 3

您可以使用svg标记来制作角落。像这样的东西：

<!DOCTYPE html>
<html>
<body>

<h1>My SVG</h1>
<div style = "position:absolute; top: 280px; right: 100px; background-color:blue;">
<svg width="200" height="100">
  <line x1="5" y1="5" x2="25" y2="5" stroke="green" stroke-width="4"/>
  <line x1="5" y1="5" x2="5" y2="25" stroke="green" stroke-width="4"/>
</svg>
</div> 
</body>
</html>

这将在左上角制作一个带绿色角落的蓝色方框。您可以添加其他三个角。然后，当您将鼠标悬停在按钮上时，可以使用css在顶部放置一个矩形。

仅限角落边框的CSS

3 个答案: