Html 如何用css斜切

Question

提问by Jaroslav Klim?ík

I need something like this:

我需要这样的东西：

How can achieve this with css? I know that one way is use background image, but can I achieve this only with css without any image?

如何用 css 实现这一点？我知道一种方法是使用背景图像，但是我可以仅使用没有任何图像的 css 来实现吗？

Answer 1

回答by Bojangles

There is a hacky way to do this, using the :beforepseudo element. You give the :beforea border, then rotate it with a CSS transform. Doing it this way adds no extra elements to the DOM, and adding/removing the strikethrough is a simple as adding/removing the class.

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

Here's a demo

这是一个演示

Caveats

注意事项

This will only work down to IE8. IE7 does not support :before, however will degrade gracefully in browsers that dosupport :beforebut don't support CSS transforms.
The angle of rotation is fixed. If the text is longer, the line will not touch the corners of the text. Be mindful of this.

这仅适用于 IE8。IE7不支持:before，但将在浏览器中正常降级做支持，:before但不支持CSS变换。
旋转角度是固定的。如果文本较长，该线将不会触及文本的角。请注意这一点。

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);
}

HTML

<span class="strikethrough">Deleted text</span>

Answer 2

回答by user

You can use background linear-gradientwith currentColorto avoid hardcoding font color:

您可以使用 background linear-gradientwithcurrentColor来避免硬编码字体颜色：

.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>.

Answer 3

回答by Kornel

del {
    position:relative;
    text-decoration:none;
}
del::after {
    content:"";
    position:absolute;
    top:50%; left:0; width:100%; height:1px; 
    background:black;
    transform:rotate(-7deg);
}

Answer 4

回答by Mike Christensen

I think you could probably apply a rotation effect to a horizontal rule. Something like:

我认为您可能可以将旋转效果应用于水平线。就像是：

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

With the CSS:

使用 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);
}

Fiddle

小提琴

Your mileage may vary depending on browser and version though, so I'm not sure if I'd resort to this. You might have to pull off some funky VML code to support older versions of IE, for example.

不过，您的里程可能会因浏览器和版本而异，因此我不确定是否会采用此方法。例如，您可能需要使用一些时髦的 VML 代码来支持旧版本的 IE。

Answer 5

回答by Milche Patern

CSS3 gradient

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)) );

My example won't fill your needs perfectly but, for more info and funny tweaks, see http://gradients.glrzad.com/.

我的示例无法完美满足您的需求，但有关更多信息和有趣的调整，请参阅http://gradients.glrzad.com/。

What you have to do is create a background-gradientof white-black-whiteand position your opacityat something like 48% 50% 52%.

您需要做的是创建一个background-gradientofwhite-black-white并将您的位置定位opacity在48% 50% 52%.

Answer 6

回答by Levi

I don't think there is a sustainable css solution to this.

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

My pure CSS solution would be to place another element of text behind your first element of text that is identical in number of characters (characters being ' '), a text-decleration of line-through, and a transform of rotate.

我的纯 CSS 解决方案是将另一个文本元素放在您的第一个文本元素后面，该元素的字符数（字符为 ' '）、行文本的文本声明和旋转变换。

Something like:

就像是：

<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>

Text Rotation example

文本旋转示例

I am looking forward to seeing better answers from other users.

我期待看到其他用户提供更好的答案。

Answer 7

回答by Scratch.

This is an old question but as an alternative you can use CSS3 Linear Gradients for example (http://codepen.io/yusuf-azer/pen/ojJLoG).

这是一个老问题，但作为替代方案，您可以使用 CSS3 Linear Gradients 例如（http://codepen.io/yusuf-azer/pen/ojJLoG）。

For extensive explaining and a LESS Solution check

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

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%);
}

Answer 8

回答by IconMatrix

I did it this way using an SVG in the HTM with a CSS class:

我在 HTM 中使用带有 CSS 类的 SVG 来做到这一点：

HTML:

HTML：

<ul>
<li>Regular Price: <div class="zIndex-10a">.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:

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; }

There might be simpler easier ways by now. I just cooked this up in a pinch for my product detail special offer page. Hope it helps someone.

现在可能有更简单的方法。我刚刚为我的产品详细信息特价页面做了这个。希望它可以帮助某人。

Answer 9

回答by Waruna Manjula

Try

尝试

.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>

Answer 10

回答by jose

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%;

Html 如何用css斜切

提问by Jaroslav Klim?ík

回答by Bojangles

Caveats

注意事项

CSS

CSS

HTML

HTML

回答by user

回答by Kornel

回答by Mike Christensen

回答by Milche Patern

回答by Levi

回答by Scratch.

回答by IconMatrix

回答by Waruna Manjula

回答by jose

相关推荐

最近更新

标签

Html 如何用css斜切

提问by Jaroslav Klim?ík

回答by Bojangles

Caveats

注意事项

CSS

CSS

HTML

HTML

回答by user

回答by Kornel

回答by Mike Christensen

回答by Milche Patern

回答by Levi

回答by Scratch.

回答by IconMatrix

回答by Waruna Manjula

回答by jose

相关推荐

Html 有人可以解释 HTML5 aria-* 属性吗？

Html HTML5 数据库和 localStorage 可以跨子域共享吗？

Html HTML5 链接到部分

Html 如何在不导致宽度增加的情况下向 textarea 添加填充？

相关推荐

最近更新

标签