Html 为 div 创建一个倾斜的边缘

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29410329/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 03:46:03  来源:igfitidea点击:

Create a slanted edge to a div

htmlcsscss-shapes

提问by germainelol

Im trying to create a slanted div, and everywhere I have looked I have just found how to do it using a border of some sorts, which will not work because the div will be places over the top of an image.

我正在尝试创建一个倾斜的 div,并且在我看过的任何地方,我刚刚找到了如何使用某种边框来完成它,这将不起作用,因为 div 将位于图像的顶部。

So the code at the moment is as follows using Bootstrap:

所以目前使用Bootstrap的代码如下:

<div class="thumbnail">
    <a href="#">
        <img class="img-responsive" src="banner.jpg">
        <h3 class="headline-badge">slanted div text</h3>
    </a>
</div>

And this is the relevant CSS:

这是相关的 CSS:

.thumbnail img.img-responsive {
    width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.headline-badge {
    color: #fff;
    margin-top: 0;
    padding: 2%;
    position: absolute; 
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: #000;
}

So I want to create a slant towards the top right. I tried using a border with little or no success, and whenever I tried to make the border transparent it wouldn't display the border.

所以我想创建一个向右上方的倾斜。我尝试使用边框很少或没有成功,每当我尝试使边框透明时,它就不会显示边框。

Does anyone have any ideas about how to create this using CSS? I believe it should also be responsive which is a major issue as the slant cannot just be a fixed height/width.

有没有人对如何使用 CSS 创建这个有任何想法?我相信它也应该是响应式的,这是一个主要问题,因为倾斜不能只是固定的高度/宽度。

The slant should be around 45 degrees, and only on the right hand side of the div. The text shouldn't be effected by the slant.

倾斜应该在 45 度左右,并且仅在 div 的右侧。文本不应受到倾斜的影响。

The effect should be similar to this:

效果应该是这样的:

http://jsfiddle.net/webtiki/yLu1sxmj/

http://jsfiddle.net/webtiki/yLu1sxmj/

Thanks for posting this fiddle, but I need to actually add text to the div, and your solution makes it difficult to do this as the comments in reply suggest. The slant would also need to be slanting upwards, not downwards, and I struggled to do this without effecting the left of the div. With your example I couldn't figure out how to add text on top of the div though I'm afraid.

感谢您发布此小提琴,但我需要实际向 div 添加文本,而您的解决方案使执行此操作变得困难,正如回复中的评论所建议的那样。倾斜也需要向上倾斜,而不是向下倾斜,我努力做到这一点而不影响 div 的左侧。用你的例子,我不知道如何在 div 顶部添加文本,但我很害怕。

回答by web-tiki

You can use a skewed pseudo element to make the slanted solid background of your element. This way, the text won't be affected by the transform property.

您可以使用倾斜的伪元素来制作元素的倾斜纯色背景。这样,文本就不会受到 transform 属性的影响。

The transform origin property allows the pseudo element to be skewed from the right bottom corner and the overflowwing parts are hidden with overflow:hidden;.

变换原点属性允许伪元素从右下角倾斜,溢出部分用 隐藏overflow:hidden;

The pseudo element is stacked behind the content of the div with a negative z-index:

伪元素堆叠在 div 的内容后面,带有一个负数z-index

div {
  position: relative;
  display: inline-block;
  padding: 1em 5em 1em 1em;
  overflow: hidden;
  color: #fff;
}

div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  transform: skew(-45deg);
  z-index: -1;
}

body {
  background: url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg');
  background-size: cover;
}
<div>slanted div text</div>
<div>
  slanted div text<br/> on several lines<br/> an other line
</div>
<div>wider slanted div text with more text inside</div>

回答by Andy P

This can be achieved easily using CSS clip-path(and -webkit-clip-path)

这可以使用 CSS clip-path( 和-webkit-clip-path)轻松实现

Example here

示例在这里

I also found this handy toolto generate the CSS code with minimum fuss.

我还发现了这个方便的工具,可以轻松生成 CSS 代码。

回答by user3842346

I think you are trying to add a slant for a banner or a simple click area. The suggestion I would give comes from how the major websites like amazon and google do it. It is as follows:

我认为您正在尝试为横幅或简单的点击区域添加倾斜。我给出的建议来自亚马逊和谷歌等主要网站的做法。如下:

Create a vector image that has the slant that you want where it covers the proportion of the div that you want. Then when you add it as an overlay you can set it as position:absolute with a z-index greater than anything in the div.

创建一个矢量图像,该图像具有您想要的倾斜度,它覆盖了您想要的 div 的比例。然后,当您将其添加为叠加层时,您可以将其设置为 position:absolute,其 z-index 大于 div 中的任何内容。

This will greatly reduce the processing and the cached image will load as quickly as css. This will also prevent cross browser issues.

这将大大减少处理,缓存图像将像 css 一样快速加载。这也将防止跨浏览器问题。

I hope this helps.

我希望这有帮助。

PS: Vector images re size nicely so you don't have to worry about pixelation and anything of that sort.

PS:矢量图像可以很好地调整大小,因此您不必担心像素化和任何此类问题。

回答by Ephraim mwai

**background-image: -webkit-linear-gradient(130deg, rgba(113, 182, 46, .6) 78%, rgba(0, 0, 0, 0) 0%);**

回答by daniekpo

The problem with the accepted answer is that it doesn't work when you have an image as the background of the parent element. I used an inline svg background instead.

接受的答案的问题在于,当您将图像作为父元素的背景时,它不起作用。我改用了内联 svg 背景。

Html

html

    <div class="parent">
      <div class="slanted">
         I have a slanted edge
     </div>
   </div>

Css

css

    .parent {
              background-image: url('http://lorempixel.com/600/350');
              background-size: cover;
              background-position: center center;
              padding: 100px;
     }

    .slanted {
                color: white;
                background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 100' xmlns='http://www.w3.org/2000/svg'  preserveAspectRatio='none'><polygon points='0,300 0,0 150,0 300,300' width='100%' height='100%' style='fill:blue;'/></svg>");
                background-size:contain;
                width: 30%;
                font-size: 2em;
                padding: 4px 40px;
   }

Note: You may have to play around with the svg and height and width a little. The accepted answer should work for most cases. It didn't work for me because I had a parent element that had an image background.

注意:您可能需要稍微调整一下 svg 以及高度和宽度。接受的答案应该适用于大多数情况。它对我不起作用,因为我有一个具有图像背景的父元素。

Here are some resources on the svg tag:

以下是 svg 标签上的一些资源:

https://www.w3schools.com/graphics/svg_intro.asp

https://www.w3schools.com/graphics/svg_intro.asp

https://developer.mozilla.org/en-US/docs/Web/SVG

https://developer.mozilla.org/en-US/docs/Web/SVG

https://www.w3schools.com/graphics/svg_polygon.asp

https://www.w3schools.com/graphics/svg_polygon.asp