如何使用 css 进行斜穿

我需要这样的东西:

如何使用 css 实现这一点？我知道一种方法是使用背景图像，但是我可以做到这一点，只有 CSS 没有任何图像？

91850 次浏览
小开

我认为你可以把旋转效应应用到水平规则上，比如:

<html>
<body>
<hr />
123456
</body>
</html>

使用 CSS:

hr
{
width: 50px;
position: absolute;
background-color: #000000;
color: #000000;
border-color: #000000;
transform:rotate(-7deg);
-ms-transform:rotate(-7deg);
-moz-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
-o-transform:rotate(-7deg);
}

小提琴

你的里程数可能会因为浏览器和版本的不同而不同，所以我不确定我是否会采用这种方法。例如，您可能需要编写一些时髦的 VML 代码来支持 IE 的旧版本。

小开
最佳答案

有一种简单的方法可以做到这一点，那就是使用 :before伪元素。给 :before一个边框，然后用 CSS 转换旋转它。这样做不会给 DOM 添加额外的元素，添加/删除删除线就像添加/删除类一样简单。

这是小样

警告

  • This will only work down to IE8. IE7 不支持 :before, however will degrade gracefully in browsers that 做 support :before but don't support CSS transforms.
  • 旋转角度是固定的。如果文本较长，则该行不会接触文本的角落。记住这一点。

CSS

.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 1px solid;
border-color: inherit;
  

-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
transform:rotate(-5deg);
}

超文本标示语言

<span class="strikethrough">Deleted text</span>
小开 
del {
position:relative;
text-decoration:none;
}
del::after {
content:"";
position:absolute;
top:50%; left:0; width:100%; height:1px;
background:black;
transform:rotate(-7deg);
}
小开

我不认为有一个可持续的 CSS 解决方案。

我纯粹的 CSS 解决方案是在文本的第一个元素后面放置另一个文本元素，这个元素的字符数(字符是’)、文本声明的换行和旋转变换是相同的。

比如:

<html>
<head>
<style>
.strike{
text-decoration: line-through;
-webkit-transform: rotate(344deg);
-moz-transform: rotate(344deg);
-o-transform: rotate(344deg);}
</style>
</head>
<body>
<p>Text to display</p>
<p class='strike'></p>
</body>
</html>

文本旋转示例

我期待从其他用户那里看到更好的答案。

小开

CSS3梯度

background-image: linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -o-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -moz-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -webkit-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -ms-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);


background-image: -webkit-gradient( linear, left bottom,right top,color-stop(0, rgb(234,20,136)), color-stop(0.5, rgb(255,46,164)), color-stop(0, rgb(255,74,197)) );

我的例子不会完全满足您的需要，但是，更多的信息和有趣的调整，见 http://gradients.glrzad.com/。

你需要做的就是创建一个 white-black-white的 background-gradient，并将你的 opacity放置在类似 48% 50% 52%的位置。

小开

And here's a fancy version:

background:none repeat scroll 0 0 rgba(255, 0, 0, 0.5);
-moz-border-radius:20px 0;
-webkit-border-radius:20px 0;
border-radius:20px 0;
content: "";
height:5px; left:-5%;
position:absolute;
top:30%;
-moz-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
transform:rotate(-7deg);
transform-origin:50% 50% 0;
width:110%;
小开

这是一个老问题，但作为一个替代方案，你可以使用例如 CSS3线性梯度(http://codepen.io/yusuf-azer/pen/ojJLoG)。

对于广泛的解释和较少的解决方案检查

Http://www.yusufazer.com/tutorials-how-to/how-to-make-a-diagonal-line-through-with-css3/

span.price--line-through {
background-color: transparent;
background-image: -webkit-gradient(linear, 19.1% -7.9%, 81% 107.9%, color-stop(0, #fff), color-stop(.475, #fff), color-stop(.5, #000), color-stop(.515, #fff), color-stop(1, #fff));
background-image: -webkit-repeating-linear-gradient(287deg, #fff 0%, #fff 47.5%, #000 50%, #fff 51.5%, #fff 100%);
background-image: repeating-linear-gradient(163deg, #fff 0%, #fff 47.5%, #000 50%, #fff 51.5%, #fff 100%);
background-image: -ms-repeating-linear-gradient(287deg, #fff 0%, #fff 47.5%, #000 50%, #fff 51.5%, #fff 100%);
}
小开

You can use background linear-gradient with currentColor to avoid hardcoding font color:

.strikediag {
background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
}
.withpadding {
padding: 0 0.15em;
}
The value is <span class="strikediag">2x</span> 3x<br>
The number is <span class="strikediag">1234567890</span>.
<p>
The value is <span class="strikediag withpadding">2x</span>3x<br>
The number is <span class="strikediag withpadding">1234567890</span>.

If you don't need the element to be fully inline, you can use a pseudo element to place the line on top of the element. This way the angle can be adjusted by changing the pseudo element's size:

.strikediag {
display: inline-block;
position: relative;
}
.strikediag::before {
content: '';
position: absolute;
left: -0.1em;
right: -0.1em;
top: 0.38em;
bottom: 0.38em;
background: linear-gradient(to left top, transparent 45.5%, currentColor 47.5%, currentColor 52.5%, transparent 54.5%);
pointer-events: none;
}
The value is <span class="strikediag">2x</span> 3x<br>
The number is <span class="strikediag">1234567890</span>.

小开

我是这样做的，在 HTM 中使用带 CSS 类的 SVG:

HTML:

<ul>
<li>Regular Price: <div class="zIndex-10a">$4.50</div><div class="zIndex-10b"><svg height="16" width="5"><line x1="0" y1="20" x2="40" y2="0" class="Strike-01a"></svg></div></li>
</ul>

CSS:

/* -- CONTAINS TEXT TO STRIKE ---- */ .zIndex-10a { display: inline-block; position: relative;  left:  0px; z-index: 10; }
/* -- CONTAINS SVG LINE IN HTML -- */ .zIndex-10b { display: inline-block; position: relative; right: 40px; z-index: 11; }
/* -- SVG STROKE PROPERTIES ------ */ .Strike-01a { stroke: rgb(255,0,0); stroke-width:2; }

现在可能有更简单的方法了。我刚刚为我的产品细节特别优惠页面做了这个。希望能帮到别人。

小开

试试看

.mydiv {
background-color: #990000;
color: #FFFF00;
font-size: 2em;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 15px;
max-width: 300px;
width: 100%;
}
.strikethrough-100p, .strikethrough-50p{
position: relative;
text-align: center;
}
.strikethrough-100p:before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 3px solid;
border-color: inherit;


-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
transform:rotate(-5deg);
}
.strikethrough-50p:before {
position: absolute;
content: "";
width:50%;
left: 25%;
top: 50%;
right: 0;
border-top: 3px solid;
border-color: inherit;


-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
transform:rotate(-5deg);
}
<div class="mydiv">
<div class="strikethrough-100p">123456</div>
</div>
<br>
<div class="mydiv">
<div class="strikethrough-50p">123456</div>
</div>

小开

从上面提高博金格尔斯的回答:

.strike-diagonal-price {
position: relative;
background-color: black;
color: white;
}
.strike-diagonal-price:before {
position: absolute;
content: "";
left: 0;
top: 45%;
right: 0;
border-top: 2px solid;
border-color: red;
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}

现在我得到了我需要的效果: enter image description here

小开

这里是我的解决方案使用剪辑路径，这也是响应

p{
position : relative
}
span{
position: absolute;
width: 100%;
height: 100%;
color : black;
clip-path: polygon(100% 0 , 100% 12% ,0% 100% , 0% 88%);
}
<p><span/>$100</p>


提交答案