css - 如何在按钮上添加斜杠
问题描述
所以这就是我到目前为止所做的:
#mybutton {
background-color: #08c2f3;
width: 200px;
height: 35px;
padding: 6px;
color: white;
font-size: 30px;
font-family: sans-serif;
text-align :center;
border: 1px solid white;
}
body {
background-color: #1599e1
}
#myBar {
width: 100%;
height: 9px;
background: white;
transform: rotateZ(-54deg);
position: relative;
left: 42px;
}
<div id="mybutton">
<span>OK</span>
<div id="myBar"></div>
</div>
但我的目标是:
解决方案
只需添加overflow: hidden
到父容器,因为它会隐藏你不需要的部分窥视。
#mybutton {
background-color: #08c2f3;
width: 200px;
height: 35px;
padding: 6px;
color: white;
font-size: 30px;
font-family: sans-serif;
text-align: center;
border: 1px solid white;
overflow: hidden;
}
body {
background-color: #1599e1
}
#myBar {
width: 100%;
height: 9px;
background: white;
transform: rotateZ(-54deg);
position: relative;
left: 42px;
}
<div id="mybutton">
<span>OK</span>
<div id="myBar"></div>
</div>
推荐阅读
- r - 如何在 R 中插值/近似数据?
- java - 当您切换到横向模式时,如何确保纵向模式下的数据显示数据完全相同的位置/索引?
- visual-studio - 从 Visual Studio 2019 推送 docker 映像时,服务任务在 aws ecs fargate 中处于挂起状态
- amazon-sagemaker - 在本地模式下运行 sagemaker python sdk sklearn 时出现 S3 权限错误
- wix - NOT UPGRADINGPRODUCTCODE 在自定义操作的重大升级时评估为 true
- reactjs - 仅在 Gatsby 的特定页面上加载 Snipcart
- sql - SQL:如何获取下一个非空值
- java - Java图像裁剪打破了libpng的PNG
- c++ - Boost Graph Library,修复节点大小
- arrays - Typescript - Check values in one array are present in another