如何解决CSS 按钮斜线作为背景只需编辑颜色
这可能是一个非常基本的问题,但不幸的是,我仍然一无所获。
我想在背景中制作一个灰色笔触角度(约 30 度)的按钮,如示例图像中所示。
我现在已经整理了各种代码并得到以下结果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
a.animated-button:link {
color: red;
font-size: 14px;
text-align: center;
display: block;
overflow: hidden;
position: relative;
border: 1px solid grey;
width: 140px;
}
a.animated-button:link:after {
content: "";
position: absolute;
width: 150%;
}
a.animated-button.gibson-two:after {
background-size: 10px 10px;
background-image: linear-gradient( transparent 50%,grey 50%);
transform: translateX(-50%) translateY(-50%) rotate(-30deg);
height: 600%;
}
</style>
</head>
<body>
<a href="#" class="animated-button gibson-two">Button text</a>
</body>
</html>
我想我不需要说这不是想要的产品。
谁能帮帮我?一个例子的链接对我来说就足够了。
非常感谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。