主页 / 问题 / 678278
Accepted
Игорь
Asked:2020-06-12 18:50:46 +0000 UTC2020-06-12 18:50:46 +0000 UTC

是否可以在不加载图像的情况下制作这样的背景？

  • 772

下午好。实际上，主题。我正在做一个着陆页，有一个带有三角形的“部分”：

在此处输入图像描述

除了如何加载图像之外什么都没有想到，但这个选项也不是最好的（我对服务器的额外请求保持沉默） - 在大屏幕上，图像从底部被切断并变成这样。

实现这样一个块的正确方法是什么？

html

2 个回答

  1. Best Answer

    例子

    * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

section {
    min-height: 100px;
    background: #fff;
    position: relative;
}
section:nth-of-type(2) {
    background: #F5F5F5;
    padding-top: 70px;
    text-align: center;
}
section:nth-of-type(2):before,
section:nth-of-type(2):after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
}
section:nth-of-type(2):before {   
    border-width: 50px 50vw 0 50vw;
    border-color: #fff transparent transparent transparent;    
}
section:nth-of-type(2):after{    
    border-width: 50px 0 50px 50vw;
    border-color: transparent transparent transparent #F9F9F9;
}
    <section></section>
<section>
    <h2>Title</h2>
</section>

    • 4

  2. 像这样的东西。

    .tr{
	width: 50%;
	height: 0;
	padding-left: 25%;
	padding-top: 25%;
	overflow: hidden;
}
.tr div {
	width: 0; 
	height: 0;
	margin-left:-500px;
	margin-top:-500px;
	
	border-left: 500px solid transparent;
	border-right: 500px solid transparent;
	border-top: 500px solid #4679BD;
}
    <div class = "tr">
  <div></div>
</div>

    它仍然只是拉伸块的宽度。

    此答案中描述了没有不必要的装饰的更合适的选项。

    • 2

相关问题