html - 在图像上设置 cut-div 的问题
问题描述
我已经cut div
使用 css 从 let 和右侧创建,我想在图像上设置半个 div。但由于border-color:white
切割部分不透明。我试图给出border-color:transparent
但它不起作用,而是删除了切割部分......让它透明应该是什么问题?
这是我的代码:
.goldenstrip::after {
content: '';
position: absolute;
top: 0;
left: 0;
border-bottom: 106px solid white;
border-right: 40px solid #c1b07a;
width: 0;
bottom: 0;
}
.goldenstrip::before {
content: '';
position: absolute;
top: 0;
right: 0;
border-top: 106px solid white;
border-left: 40px solid #c1b07a;
width: 0;
bottom: 0;
}
.goldenstrip {
text-align: center !important;
display: block;
text-transform: uppercase;
background: #C1B07A;
color: white;
font-size: 24px;
margin: 0 auto;
padding: 38px 0px;
position: relative;
font-family: "Roboto Medium";z-index: 1;
top: 52px;
width: 90%;
}
.seminar_image img {
width: 100%;
}
<span class="goldenstrip">Hello world</span>
<div class="seminar_image"><img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" alt="" class=""></div>
解决方案
请使用这个 css 而不是你的after
css before
。
goldenstrip::after {
content: '';
position: absolute;
top: 0;
left: -22px;
width: 45px;
bottom: 0;
transform: skew(23deg);
background: #c1b07a;
}
.goldenstrip::before {
content: '';
position: absolute;
top: 0;
right: -22px;
width: 50px;
bottom: 0;
background: #c1b07a;
transform: skew(23deg);
}
推荐阅读
- r - 根据 RStudio 窗口大小和绘图方法绘制外观变化
- html - 使用 CSS 围绕圆圈旋转图像的问题
- reactjs - onload 在我的反应页面上不起作用
- javascript - 我如何正确实施 onBlur,我忽略了另一个问题吗?
- sbt - 错误 - 应为“;” 在使用 sbt 运行 Gatling 时
- python - 我已经重写了 save() 方法,但新代码仅应用于新记录
- c - 检查 scanf 返回的内容并清除新输入
- sql-server - 如何使用异步管道从服务器应答中填充数组
- php - 过滤php中2个数组之间不匹配的数组
- javascript - 仅在 Mac 以外的设备上添加子菜单项:Electron JS