如何用css做空心
Posted
技术标签:
【中文标题】如何用css做空心【英文标题】：How to make hollows with css 【发布时间】：2021-11-01 17:55:38 【问题描述】：我正在尝试缩小我的卡片元素。我想要实现的是：
我的问题是我无法在顶部和底部制作空洞。
所以边距：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" />
</div>
<div class="rip"></div>
<div class="sold-tickets-actions">
<img class="sold-tickets-image" :src="image" />
</div>
</div>【问题讨论】：
相关：***.com/a/51365042/8620333 还有这个：***.com/a/67383502/8620333 和这个：***.com/a/67345816/8620333 我认为masking可以帮助你 这是什么构造？:src="image"
@mplungjan 可能是某种 VueJS 绑定指令
【参考方案1】：
这应该可以解决问题...
/*
* 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" />
</div>
<div class="rip"></div>
<div class="sold-tickets-actions">
<img class="sold-tickets-image" :src="image" />
</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" />
</div>
</div>
<div class="sold-tickets-actions">
<div class="sold-tickets-inner">
<img class="sold-tickets-image" :src="image" />
</div>
</div>
</div>结果：
【讨论】：
感谢您的回答，但我想要实现的是在顶部和底部都有孔。 我已经更新了我的答案以包含另一种方法和 css 前缀以获得更好的浏览器支持。 感谢您的回答以上是关于如何用css做空心的主要内容，如果未能解决你的问题，请参考以下文章