代码之家 › 专栏 › 技术社区 › Zhihar

css:带背景的选项卡样式边框

border background css html

Zhihar · 技术社区 · 6 年前

告诉我,我可以将背景设置为以下方式形成的边界吗?

.object {
    position: relative;
    width: 300px;
    height: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    background: transparent;
}

.object:after {
    content: '';
    position: absolute;
    top: 2px;
    left: calc(2.45px - 50px);
    width: calc(300px - 2 * 1.4px);
    height: 0px;
    border-left: 49px solid transparent;
    border-right: 49px solid transparent;
    border-bottom: calc(100px - 2px) solid white;
    background: transparent;
}

<div class="object"></div>

可能值得使用自定义 border-image ,但在我看来,这仍然没有足够的功能。

我希望在选项卡上显示图像背景,而不是白色(例如, https://cdn.pixabay.com/photo/2016/12/02/17/39/texture-1878273__340.jpg )

1 回复 | 直到 6 年前

Temani Afif BoltClock 6 年前

可以使用多个背景和渐变:

.object {
  width: 300px;
  height: 100px;
  background:
  linear-gradient(to bottom left,#fff 49%,red 49%,red 51%,transparent 0) 100% 0/40px 100% no-repeat,
  linear-gradient(to bottom right,#fff 49%,red 49%,red 51%,transparent 0) 0 0/40px 100% no-repeat,
  linear-gradient(red,red) 0 0/100% 2px no-repeat,
  url(https://cdn.pixabay.com/photo/2016/12/02/17/39/texture-1878273__340.jpg)0 0/cover no-repeat;
}

<div class='object'></div>

剪辑路径的另一个想法:

body {
 background:yellow;
}

.object {
  width: 300px;
  height: 100px;
  border-bottom:none;
  background: 
  linear-gradient(red,red) 0 0/100% 2px no-repeat,   
  linear-gradient(to bottom left,red 51%,transparent 51.5%) 100% 0/60px 100%  no-repeat,
  linear-gradient(to bottom right,red 51%,transparent 51.5%) 0 0/60px 100%  no-repeat,   
  url(https://cdn.pixabay.com/photo/2016/12/02/17/39/texture-1878273__340.jpg)0 0/cover no-repeat;
 -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

<div class='object'></div>

更新

另一种更受支持的方式是依赖更多元素:

body {
 background:yellow;
}
* {
 box-sizing:border-box;
}
.object {
  width: 300px;
  height: 100px;
  border-bottom:none;
  font-size:0;
}
.object .left,
.object .right {
  width:50%;
  display:inline-block;
  height:100%;
  border-top:2px solid red;
  position:relative;
  overflow:hidden;
}
.object .left {
  border-left:2px solid red;
  transform:skew(-20deg);
  transform-origin:bottom left;
}
.object .right {
  border-right:2px solid red;
  transform:skew(20deg);
  transform-origin:bottom right;
}
.object .left:before {
  content:"";
  position:absolute;
  top:0;
  left:-20px;
  bottom:0;
  right:-20px;
  transform:skew(20deg);
  background:url(https://cdn.pixabay.com/photo/2016/12/02/17/39/texture-1878273__340.jpg); 
}
.object .right:before {
  content:"";
  position:absolute;
  top:0;
  left:-20px;
  bottom:0;
  right:-20px;
  transform:skew(-20deg);
  background:url(https://cdn.pixabay.com/photo/2016/12/02/17/39/texture-1878273__340.jpg); 
}

<div class='object'>
<div class="left"></div>
<div class="right"></div>
</div>