html - 如何用css做空心
问题描述
我正在尝试缩小我的卡片元素。我想要实现的是:
我的问题是我无法在顶部和底部制作空洞。
所以边距:20px 0,我试着做这些空心,但我没有成功,我的卡是完全笔直的。你能帮我解决这个问题吗?
.card {
position: relative;
display: flex;
min-width: 0;
height: 100px;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border-radius: .25rem;
border: none;
filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));
flex-direction: initial;
}
.sold-tickets-image {
max-width: 100px;
height: 120px;
cursor: pointer;
margin: 0 35px;
}
.rip {
width: 40px;
height: auto;
margin: 20px 0;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAACCAYAAAB7Xa1eAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAAAaSURBVBhXY5g7f97/2XPn/AcCBmSMQ+I/AwB2eyNBlrqzUQAAAABJRU5ErkJggg==);
background-size: 4px 2px;
background-repeat: repeat-y;
background-position: center;
position: relative;
box-shadow: 0 1px 0 0 #fff, 0 -1px 0 0 #fff;
}
.rip:before,
.rip:after {
content: "";
position: absolute;
width: 20px;
height: 20px;
top: -20px;
left: 20px;
transform: translate(-50%, -50%) rotate(135deg);
border: 5px solid transparent;
border-top-color: #fff;
border-right-color: #fff;
border-radius: 100%;
}
.rip:before {
//left: -10px;
}
.rip:after {
transform: translate(-50%, -50%) rotate( 315deg);
top: 100px;
}
<div class="card">
<div class="sold-tickets-actions">
<img class="sold-tickets-image" :src="image" alt="Sold Ticket" />
</div>
<div class="rip"></div>
<div class="sold-tickets-actions">
<img class="sold-tickets-image" :src="image" alt="Sold Ticket" />
</div>
</div>
解决方案
这应该可以解决问题...
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/
.card {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 120px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));
filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));
}
.rip {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
position: relative;
width: 40px;
height: 100%;
background-color: #fff;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAGCAYAAADpJ08yAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAoGVYSWZNTQAqAAAACAAGARIAAwAAAAEAAQAAARoABQAAAAEAAABWARsABQAAAAEAAABeASgAAwAAAAEAAgAAATEAAgAAABAAAABmh2kABAAAAAEAAAB2AAAAAAAAAGAAAAABAAAAYAAAAAFwYWludC5uZXQgNC4wLjkAAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAAKgAwAEAAAAAQAAAAYAAAAAX2gaIwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAcppVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDYuMC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+cGFpbnQubmV0IDQuMC45PC94bXA6Q3JlYXRvclRvb2w+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgrxHgn4AAAAGUlEQVQIHWNgIAwYZ8+d8x+kjIWJiQmsHAArxwLf5rmOMgAAAABJRU5ErkJggg==);
background-size: 2px 4px;
background-repeat: repeat-y;
background-position: center;
-webkit-mask:
radial-gradient( circle at center top, transparent 15px, black 16px) top,
radial-gradient( circle at center bottom, transparent 15px, black 16px) bottom;
mask:
radial-gradient( circle at center top, transparent 15px, black 16px) top,
radial-gradient( circle at center bottom, transparent 15px, black 16px) bottom;
-webkit-mask-size:100% 50%;
mask-size:100% 50%;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
.sold-tickets-actions {
display: block;
background-color: #fff;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
img.sold-tickets-image {
position: relative;
max-width: 100px;
height: 100%;
cursor: pointer;
display: block;
margin: 0 auto;
}
<div class="card">
<div class="sold-tickets-actions">
<img class="sold-tickets-image" :src="image" alt="Sold Ticket" />
</div>
<div class="rip"></div>
<div class="sold-tickets-actions">
<img class="sold-tickets-image" :src="image" alt="Sold Ticket" />
</div>
</div>
结果:
上面的例子只做票的中心,要将样式应用于所有角落,您可以执行以下操作...
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/
.card {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 120px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));
filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));
}
.sold-tickets-actions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
.sold-tickets-actions:before,
.sold-tickets-actions:after {
content: '';
display: block;
position: relative;
width: 20px;
height: 100%;
background: #fff;
}
.sold-tickets-actions:before {
-webkit-mask:
radial-gradient( circle at left top, transparent 15px, black 16px) top,
radial-gradient( circle at left bottom, transparent 15px, black 16px) bottom;
mask:
radial-gradient( circle at left top, transparent 15px, black 16px) top,
radial-gradient( circle at left bottom, transparent 15px, black 16px) bottom;
-webkit-mask-size: 100% 50%;
mask-size: 100% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
border-left: 1px dashed #333;
}
.sold-tickets-actions:after {
-webkit-mask:
radial-gradient( circle at right top, transparent 15px, black 16px) top,
radial-gradient( circle at right bottom, transparent 15px, black 16px) bottom;
mask:
radial-gradient( circle at right top, transparent 15px, black 16px) top,
radial-gradient( circle at right bottom, transparent 15px, black 16px) bottom;
-webkit-mask-size: 100% 50%;
mask-size: 100% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
border-right: 1px dashed #333;
}
.sold-tickets-inner {
background-color: #fff;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
img.sold-tickets-image {
position: relative;
max-width: 100px;
height: 100%;
cursor: pointer;
display: block;
margin: 0 auto;
}
<div class="card">
<div class="sold-tickets-actions">
<div class="sold-tickets-inner">
<img class="sold-tickets-image" :src="image" alt="Sold Ticket" />
</div>
</div>
<div class="sold-tickets-actions">
<div class="sold-tickets-inner">
<img class="sold-tickets-image" :src="image" alt="Sold Ticket" />
</div>
</div>
</div>
结果:
推荐阅读
- javascript - req.isAuthenticated() 重定向更改?
- azure - Azure“文本转语音”返回“无效的 CID 或语言”。这是什么意思?
- dictionary - 如何链接 LinkedList 节点以映射值
- opengl - GLFW_TRANSPARENT 和 GLFW_ALPHA_MASK 未定义
- python - Keras - Glorot 统一初始化器:输入和输出单元?
- javascript - 在生产环境中构建和运行时找不到模块“./static”
- wordpress - 如何在加载网页 5 分钟后运行 Javascript 代码?
- sql - 如何在 Redshift 中做分层随机样本?
- python - Python protobuf "from google.protobuf.pyext import _message" - "ImportError: DLL load failed: The specified procedure could not be found"
- android - 读取安卓账户数据