<div class="container">
  <div class="title"><span>Lorem Ipsum</span></div>
  <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="border"></div>
</div>
.container
  width 450px
  color #00f4ef
  padding 25px
  margin auto
  position relative
  box-sizing border-box
  .title
    height 25px
    line-height @height
    font-size 18px
    margin-bottom 25px
    display flex
    justify-content space-between
    align-items center
    &:after // 渐变条纹
      content ''
      width 100%
      height @height
      background: linear-gradient(to right, currentColor 25%,transparent 0);
      background-size 15px 100%;
      margin-left 15px
      display block
      transform skewX(-15deg)
      // 渐变遮罩
      mask linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)
      -webkit-mask @mask
    span
      flex 0 0 auto
  .content
    font-size 15px
    line-height 1.4
  .border
    width 105%
    height 100%
    background rgba(@color,.08)
    border 2px solid currentColor
    position absolute
    top 0
    right 0
    transform skewX(-15deg)
body
  width 100vw
  height 100vh
  background #020819 url(https://z3.ax1x.com/2021/07/31/WvP6SK.jpg) center/cover no-repeat
  display flex
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.