标题周围的“类作物”视觉效果

Question

我被分配了一项有趣的任务，这似乎是这个美好社区的一个不错的切入点，所以我在这里，你好。

我需要做的是围绕标题创建“类作物”效果（因此，他们说，对我来说并不精确，但无论如何），基本上是CSS类.croplike-effect，它将使这些标题看起来像大致像这样：

这只是一张模型照片，但我相信您会明白的。

我把:before和:after CSS元素，一些边框和transform: rotate弄乱了，但实际上没有值得分享的地方。我被困住了。

.croplike-effect {
  border: 2px solid #C6C6C6;
  color: #5E5E67;
  background: #F2F2F2;
  padding: 20px;
  font-size: 26px;
  display: inline-block;
}

<h1 class="croplike-effect">My heading</h1>

理想情况下，它不需要HTML标记中的其他元素，我希望它是可行的。

谢谢：）。

Answer 1

  

新编辑：添加了额外的span以完成无法完成的工作，因为它无法完成   单个元素。

您可以在伪类之后/之前尝试。它不完美，但足以调整。

*{
  box-sizing: border-box;
}


  .croplike-effect {
    border: 2px solid #C6C6C6;
    color: #5E5E67;
    background: #F2F2F2;
    padding: 20px;
    font-size: 26px;
    display: inline-block;
    margin: 2em;
    position: relative;
    z-index: 1;
  }


  .croplike-effect:before{
     content: '';
     position: absolute;
     top: -32px;
     left: -32px;
     border: 2px solid #C6C6C6;
     width: 30px;
     height: 30px;
     border-top: 0;
     border-left: 0;
  }

  .croplike-effect:after{
     content: '';
     position: absolute;
     bottom: -32px;
     right: -32px;
     border: 2px solid #C6C6C6;
     width: 30px;
     height: 30px;
     border-bottom: 0;
     border-right: 0;
  }

  .diagonal-line{
     position: absolute;
     top: 26px;
     right: -51px;
     width: 134%;
     height: 2px;
     background-color: #C6C6C6;
     transform: rotate(-202.5deg);
     z-index: -1;
  }

<h1 class="croplike-effect">My heading <span class="diagonal-line"></span></h1>

这里是fiddle

Answer 2

这是只有背景的想法：

.croplike-effect {
  color: #5E5E67;
  padding: 30px;
  font-size: 26px;
  display: inline-block;
  background:
    linear-gradient(to bottom right,transparent calc(50% - 1px),#C6C6C6 calc(50% - 1px),#C6C6C6 calc(50% + 1px),transparent 0) 28px 0/ calc(148% - 54px) calc(133% - 54px) no-repeat,
    linear-gradient(#C6C6C6,#C6C6C6) 25px calc(100% - 25px)/calc(100% - 26px) 2px  no-repeat,
    linear-gradient(#C6C6C6,#C6C6C6) 0 25px/calc(100% - 26px) 2px  no-repeat,
    linear-gradient(#C6C6C6,#C6C6C6) calc(100% - 25px) 26px/2px calc(100% - 26px) no-repeat,
    linear-gradient(#C6C6C6,#C6C6C6) 25px 0/2px calc(100% - 26px) no-repeat, 
    linear-gradient(#F2F2F2,#F2F2F2) center/calc(100% - 54px) calc(100% - 54px) no-repeat;
}

<h1 class="croplike-effect">My heading</h1>
<h1 class="croplike-effect">My other heading</h1>
<h1 class="croplike-effect">heading</h1>