我想将css三角形定位为背景 [英] I want to position a css triangle as a background

问题描述

我要构建以下布局:

可取的是，我只想使用css.但是即使有背景图像，我也不知道如何构建它.我在网上搜索，但没有找到需要的帮助.

Preferable i want only use css for that. But even with an background-image i wouldn't know how to build it. I searched the web, but didn't find the help i needed.

布局包含一个div，其中包含一些文本.背景颜色是浅灰色.然后，我想添加一个较暗的三角形背景，如图所示.这也应该作为响应式布局.

The Layout contains a div with some text in it. The background-color is a light gray. Then i would love to add a darker triangle background as shown in the picture. This should work as a responsive layout, too.

我尝试过的事情:

# html
<div class="wrapper">
    <h1>Das ist ein test</h1>
    <h2>subheadline</h2>
</div>

#css
.wrapper {
  padding-top: 100px;
  text-align: center;
  width: 100%;
  background-color: #4d4d4d;
  height: 400px;
  color: #fff;
  position: relative;
}
.wrapper:before{
  height: 50%;
  width:100%;
  position:relative;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  content:'';
  display:block;
  position:absolute;
  top: 0;
  background-color: #3d3d3d;
}

但是这不起作用，我自己也无法解决.

But this does not work and i can't figure it out on my own.

谢谢您的帮助！

推荐答案

您可以在较暗的背景上方设置2个渐变.

You can set 2 light gradients on top of the darker background.

它们相互重叠，只剩下其余的三角形变黑

They overlap each other and leave only the remaining triangle darker

div {
    width: 400px;
    height: 200px;
    border: solid 1px green;
    background: linear-gradient(to top left, lightgreen 50%, transparent 50%),
    linear-gradient(to top right, lightgreen 50%, transparent 50%), green;
}

<div></div>

这篇关于我想将css三角形定位为背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！