我想定位一个css三角形作为背景

xcitsw88 于 2023-06-25 发布在其他

关注(0)|答案(4)|浏览(119)

我想构建以下布局：

最好我只想使用CSS。但即使有了背景图像，我也不知道如何构建它。我在网上搜索了一下，但没有找到我需要的帮助。
布局包含一个div，其中包含一些文本。背景颜色是浅灰色。然后我想添加一个较暗的三角形背景，如图所示。这也应该是一个响应式布局。
我尝试的是：

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

但这不起作用，我自己也搞不清楚。
谢谢你的帮助!

css

来源：https://stackoverflow.com/questions/42837102/i-want-to-position-a-css-triangle-as-a-background

4条答案

按热度按时间

pbwdgjma1#

您可以在较暗的背景上设置2个灯光梯度。
它们相互重叠，只留下剩下的三角形较暗

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>

赞(0）回复(0）举报 2023-06-25

sf6xfgos2#

试试这一个，但仍然需要一些工作的响应部分。

.box{
  position: relative;
  width: 100%;
  max-width: 600px;
  background: #ccc;
  min-height: 300px;
}
.box:before {
  width: 0; 
  height: 0;
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  border-left: 300px solid transparent;
  border-right: 300px solid transparent;
  border-top: 180px solid #555;
}

.box .content{
  z-index: 10;
  position: relative;
  color: #fff;
  text-align: center;
  padding-top: 40px;
}

h1, h2{
  margin: 0;
  padding: 0;
}
h2{
  margin-bottom: 80px;
}

.btn{
  background: #f00;
  color: #fff;
  display: inline-block;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  min-width: 200px;
  font-size: 20px;
}

<div class="box">
  <div class="content">
  <h1>Headline</h1>
  <h2>Headline</h2>
    
    <a href="#" class="btn">CTA</a>
  </div><!--// end .content -->
</div><!--// end .box -->

赞(0）回复(0）举报 2023-06-25

j1dl9f463#

这应该让你接近，并说明了一个CSS唯一的方法：

* {
  margin: 0;
  padding: 0
}

body {
  background: #ccc;
  min-height: 500px;
}

div {
  width: 0;
  height: 0;
  margin: 0px auto;
  border: 200px solid transparent;
  border-top-color: grey;
}

a {
  display: block;
  background: blue;
  color: white;
  padding: 5px 10px;
  width: 200px;
  margin: 0px auto;
  position: relative;
  top: -200px;
  text-align: center;
  text-decoration: none;
}

<div></div>
<a href="#">link</a>

赞(0）回复(0）举报 2023-06-25

lzfw57am4#

.popover-arrow {
    width: 0;
    height: 0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-right: 14px solid rgba(0,0,0,.2);
    left: -14px;
  }

  .popover-arrow::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 13px solid #fff;
    position: absolute;
    top: -13px;
    left: 1px;
  }

赞(0）回复(0）举报 2023-06-25

我来回答

我想定位一个css三角形作为背景

4条答案

相关问题

热门标签

最新问答