如何使“精选”边框的两端倾斜？答案

【问题标题】：How can I make both end of the "Featured" border slant?如何使“精选”边框的两端倾斜？
【发布时间】：2021-09-28 14:14:02
【问题描述】：

我想让“特色”部分倾斜。我也需要顶部的倾斜。在我的按钮倾斜类中，我添加了 background:linear-gradient 以隐藏边框的另一侧，但我不知道如何隐藏边框的顶部。任何帮助将不胜感激。谢谢！

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 80%;
  margin: 50px auto;
}

.header {
  font-size: 22px;
  color: #462681;
  margin-bottom: 50px;
  text-align: center;
}

.row {
  display: flex;
  gap: 2em;
  justify-content: center;
  flex-wrap: wrap;
}

.card {
  margin-bottom: 30px;
  width: 23%;
  border: 2px solid #ccc;
  transition: 0.2s;
  border-radius: 3px;
}

.slant-container {
  transform: skewX( -3deg);
}

.button-default {
  color: black;
  font-weight: 900;
  background-color: #ffebb5;
  text-align: center;
  padding: 5px 10px;
  margin: 10px;
  display: inline-block;
}

.button-slanted {
  background: linear-gradient( -130deg, transparent, transparent 40px, #ffebb5 20px, #ffebb5 20px);
  width: 263px;
  position: absolute;
  margin-left: 12rem;
  transform: rotate(40deg);
  outline: none;
}

.button-slanted-content {
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
}

.info {
  float: left;
  margin: 5px;
  width: 20px;
}

.card-border {
  background: #fa6400;
}

.card-border-2 {
  background: #0491ff;
}

#top-border {
  height: 15px;
}

h3 {
  color: rgba(0, 0, 0, 0.0);
}

img {
  width: 100%;
  height: 30vh;
}

.card-body {
  padding: 30px 10px;
  text-align: center;
  font-size: 18px;
}

.card-title {
  border-bottom: 1px solid #ccc;
}

h1 {
  margin: 20px;
}

.card-body .btn {
  display: block;
  color: #fff;
  margin-top: 30px;
  padding: 10px 15px;
  border-radius: 8px;
  text-decoration: none;
  background: linear-gradient(to right, #ff416c, #ff4b2b);
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px -10px rgba(0, 0, 0, 0.25);
}


/* RESPONSIVE MEDIA */

@media screen and (max-width:800px) {
  .card {
    width: 40%;
  }
}

@media screen and (max-width:540px) {
  .container {
    width: 100%;
  }
  .heading {
    padding: 20px;
    font-size: 20px;
  }
  .card {
    width: 80%;
  }
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<div class="container">
  <div class="header">
    <h1>Here to help</h1>
  </div>
  <div class="row">
    <div class="card">
      <div class="card-border" id="top-border">
        <h3>none</h3>
      </div>
      <div class="card-img">
        <img src="https://i.postimg.cc/G9nspRT4/photo-1547082688-9077fe60b8f9-ixlib-rb-1-2.jpg" alt="">
      </div>
      <div class="card-title">
        <h1>Helping People</h1>
      </div>
      <div class="card-body">

        <svg class="info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi neque moslestiae eius explicabo mollitia tempore reiciendis, vel, sequi.</p>
        <a href="#" class="btn">Read more</a>
      </div>
    </div>

    <div class="card">
      <div class="card-border-2" id="top-border">
        <h3>none</h3>
      </div>
      <div class="slant-container">
        <div class="button-default button-slanted">
          <span class="button-slanted-content">FEATURED!</span>
        </div>
      </div>
      <div class="card-img">
        <img src="https://i.postimg.cc/Sst6kHG9/photo-1582213782179-e0d53f98f2ca-ixlib-rb-1-2.jpg" alt="">
      </div>
      <div class="card-title">
        <h1>Together</h1>
      </div>
      <div class="card-body">
        <svg class="info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi neque moslestiae eius explicabo mollitia tempore reiciendis, vel, sequi.</p>
        <a href="#" class="btn">Read more</a>
      </div>
    </div>

    <div class="card">
      <div class="card-border" id="top-border">
        <h3>none</h3>
      </div>
      <div class="slant-container">
        <div class="button-default button-slanted">
          <span class="button-slanted-content">FEATURED!</span>
        </div>
      </div>
      <div class="card-img">
        <img src="https://i.postimg.cc/vBPzD4Gc/photo-1550085997-838afca7d3d4-ixlib-rb-1-2.jpg" alt="">
      </div>
      <div class="card-title">
        <h1>London City</h1>
      </div>
      <div class="card-body">
        <svg class="info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi neque moslestiae eius explicabo mollitia tempore reiciendis, vel, sequi.</p>
        <a href="#" class="btn">Read more</a>
      </div>
    </div>

    <div class="card">
      <div class="card-border-2" id="top-border">
        <h3>none</h3>
      </div>
      <div class="card-img">
        <img src="https://i.postimg.cc/s2GyThNR/photo-1475463606759-53a070b44126-crop-entropy-cs-tinysrgb-fit-max-fm-jpg-ixid-Mnwx-Mj-A3f-DB8-MXxhb-Gx8f-H.jpg" alt="">
      </div>
      <div class="card-title">
        <h1>Big Ben</h1>
      </div>
      <div class="card-body">
        <svg class="info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi neque moslestiae eius explicabo mollitia tempore reiciendis, vel, sequi.</p>
        <a href="#" class="btn">Read more</a>
      </div>
    </div>
    <div class="card">
      <div class="card-border" id="top-border">
        <h3>none</h3>
      </div>
      <div class="card-img">
        <img src="https://i.postimg.cc/HWycrJYR/photo-1605146769289-440113cc3d00-ixlib-rb-1-2.jpg" alt="">
      </div>
      <div class="card-title">
        <h1>Buy your first home</h1>
      </div>
      <div class="card-body">
        <svg class="info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi neque moslestiae eius explicabo mollitia tempore reiciendis, vel, sequi.</p>
        <a href="#" class="btn">Read more</a>
      </div>
    </div>
    <div class="card">
      <div class="card-border-2" id="top-border">
        <h3>none</h3>
      </div>
      <div class="card-img">
        <img src="https://i.postimg.cc/28gZH4Hz/photo-1618498082410-b4aa22193b38-crop-entropy-cs-tinysrgb-fit-max-fm-jpg-ixid-Mnwx-Mj-A3f-DB8-MXxhb-Gx8f-H.jpg" alt="">
      </div>
      <div class="card-title">
        <h1>Here for you</h1>
      </div>
      <div class="card-body">
        <svg class="info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi neque moslestiae eius explicabo mollitia tempore reiciendis, vel, sequi.</p>
        <a href="#" class="btn">Read more</a>
      </div>
    </div>
    <div class="card">
      <div class="card-border" id="top-border">
        <h3>none</h3>
      </div>
      <div class="card-img">
        <img src="https://i.postimg.cc/9MBdKrDL/photo-1576091160399-112ba8d25d1d-ixlib-rb-1-2.jpg" alt="">
      </div>
      <div class="card-title">
        <h1>Connect with us</h1>
      </div>
      <div class="card-body">
        <svg class="info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi neque moslestiae eius explicabo mollitia tempore reiciendis, vel, sequi.</p>
        <a href="#" class="btn">Read more</a>
      </div>
    </div>

  </div>
</div>

【问题讨论】：

标签： javascript html css frontend developer-tools

【解决方案1】：

最简单的方法就是在父级上使用“溢出：隐藏”。它会为您隐藏角落，无需折腾切割东西。请参见下面的示例：

.master {
  width: 200px;
  border: solid 1px #000;
  padding: 5px;
  position: relative;
  overflow: hidden;
}

.ribbon {
  position: absolute;
  width: 400px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  background: red;
  text-align: center;
  top: 42px;
  right: -150px;
  z-index: 10;
}

<div class="master">
  <div class="ribbon">
    I am a ribbon!
  </div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae tempus nisi. Morbi id orci nec lacus rutrum porta et ornare lectus. Aenean odio turpis, vestibulum varius iaculis eu, faucibus ut mi. Fusce et mauris vehicula, facilisis erat mattis, scelerisque leo. Etiam posuere scelerisque nisi sed suscipit. Nunc eget lacus orci. Vestibulum ultrices eleifend orci, in mollis est molestie non. In fringilla ut nisl sed dapibus. Nulla mattis massa ac volutpat posuere. Pellentesque eu vulputate enim. Ut consequat at orci a ultrices. Maecenas convallis enim et ante rutrum, sit amet tempus augue semper. Pellentesque tortor justo, lacinia id vehicula mattis, consectetur quis sapien. Nunc dapibus vestibulum massa, ac elementum ligula sollicitudin nec. In feugiat nec nisi at porta.
</div>

【讨论】：