Html &引用；“作物状”；标题周围的视觉效果

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

我需要做的是围绕标题创建“裁剪效果”（他们说，对我来说并不准确，但不管怎样），基本上是一个CSS类

。croplike效果将使这些标题大致如下：

.croplike效应

“>

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

我搞砸了

：在
之前和
：在
CSS元素之后，一些边框和
变换：旋转
，但是这里没有什么值得分享的东西，真的。我被卡住了


.croplike效应{
边框：2个实心#C6；
颜色：#5e57；
背景#f2f2；
填充：20px；
字号：26px；
显示：内联块；
}
我的标题
新编辑：添加了一个额外的
span
来完成不符合要求的工作，因为它不能用
单一元素

您可以尝试使用after/before伪类。它并不完美，但足以进行调整


*{
框大小：边框框；
}
克罗普利克效应{
边框：2个实心#C6；
颜色：#5e57；
背景#f2f2；
填充：20px；
字号：26px；
显示：内联块；
边缘：2米；
位置：相对位置；
z指数：1；
}
.克罗普利克效应：之前{
内容：''；
位置：绝对位置；
顶部：-32px；
左：-32px；
边框：2个实心#C6；
宽度：30px；
高度：30px；
边界顶部：0；
左边框：0；
}
.克罗普利克效应：之后{
内容：''；
位置：绝对位置；
底部：-32px；
右：-32px；
边框：2个实心#C6；
宽度：30px；
高度：30px；
边界底部：0；
右边界：0；
}
.对角线{
位置：绝对位置；
顶部：26px；
右：-51px；
宽度：134%；
高度：2倍；
背景色：#C6；
变换：旋转（-202.5度）；
z指数：-1；
}
我的标题
以下是一个只有背景的想法：


.croplike效应{
颜色：#5e57；
填充：30px；
字号：26px；
显示：内联块；
背景：
线性梯度（至右下角，透明钙（50%-1px），#C6钙（50%-1px），#C6钙（50%+1px），透明0）28px 0/钙（148%-54px）钙（133%-54px）无重复，
线性梯度（#C6，#C6）25px计算（100%-25px）/计算（100%-26px）2px无重复，
线性梯度（#C6，#C6）0 25px/计算（100%-26px）2px无重复，
线性梯度（#C6，#C6）计算（100%-25px）26px/2px计算（100%-26px）无重复，
线性梯度（#C6，#C6）25px 0/2px计算（100%-26px）无重复，
线性梯度（#F2F2F2，#F2F2F2）中心/计算（100%-54px）计算（100%-54px）无重复；
}
我的标题
我的另一个标题
标题
作物模型在哪里？我无法添加照片，因为这是我的第一个问题，它位于链接的后面。
。croplike效应
。它缺少对角线。更新了！！UI方面，以奇怪的方式看到对角线交叉有点奇怪，所以保持了它应有的外观。对角线不会直接从角度点出来ly，如何修复它？@DKSTNR它已更新，但需要添加一个额外的跨度来完成这项工作，因为它无法完成。从技术上讲，它仍然不是对角线，不够精确。感谢您的试用，它为我指出了一些方向，但还不足以接受作为答案。非常酷，告诉我为什么它看起来不像30px填充)@DKSTNR添加边框，你会理解；）…这是因为我玩过背景，背景没有覆盖整个区域好的，我用JSFIDLE检查过。如何在用
线性渐变创建的边框和文本之间创建一个空白？在
计算（）中
，硬编码，对吗？是否可行？@DKSTNR是的，每个渐变都有一个位置（前两个数字），然后是一个大小（后两个数字/），因此只需播放值，您就会看到结果；）