主页 / 问题 / 1130568
Accepted
Yaroslav Bondar
Asked:2020-05-24 16:21:07 +0000 UTC2020-05-24 16:21:07 +0000 UTC

如何在响应式布局中显示菱形

  • 772

**由于菱形，您需要确保切换设备工具栏（设备模拟器）右侧没有缩进。切换设备工具栏外没有填充，部分菱形向右移动而不显示**

在此处输入图像描述

在此处输入图像描述

   <section class="about">
        <div class="wrapper">
            <header class="about__title-block">
                <h2 class="about__title title">About us</h2>
                <div class="about__subtitle subtitle">For nearly twenty-five years, SolarBox has developed,
                     implemented and financed sustainable focus 
                    that recapture and reinvest otherwise lost resources.
                </div>                 
            </header>

.about {
    width: 100%;
    position: relative;
    padding: 118px 0 153px 0;
    background: #252525;
    /* padding-top: 20%;
    padding-bottom: 20%; */
}
.about__title-block {
    /* width: 856px; */
    width: 66.2%;
    height: 525px;
    /* height: 100%; */
    background: #EF3527;
    /* Shadow 25px 00 */
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.25);
}
.about__title {
    /* width: 22.76%; */
    width: 34.425%;
    margin: 0px 0 43px 10.28%;
    padding-top: 130px;
}
.about__title::after {
   content:"";
   display: block;
   /* width: 59.19px; */
   width: 25.57%;
   height: 5px;
   background: #FFA630;
   margin-top: 42px;
}
.about__subtitle {
    /* margin: 0 0 0 88px; */
    margin-left: 10.28%;
    /* width: 463px;     */
    width: 54.19%;
    /* height: 120px; */
    height: auto;
    color: #FFFFFF;
}
.about__img {
    position: absolute;
    /* top: 64px; */
    /* left: 661px; */
    top: 8%;
    left: 51.1%;
    /* width: 525px; */
    /* height:  525px;  */
    width: 30.67%;
    height: 525px;;
    background: url("../img/about/about-img.png") center center no-repeat;
    /* background-size: cover; */
    background-size: 100% 100%;
    border-radius: 5px;
    /* z-index: 34; */
}
.about__figure {
    display: none;
    position: absolute;
    width: 32.533%;
    height: 57%;
    /* width: 420px;  */
    /* height: 420px;  */
    /* left: 1011px;
    top: 1295.54px; */
    top: 27.5%;
    left: 72.6%;
    border: 20px solid #FFA630;
    box-sizing: border-box;
    box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    transform: rotate(-31.35deg);
    z-index: 0.1;
}
            <div class="about__figure"></div>
            <div class="about__img"></div>
        </div>
    </section>
html

1 个回答

  1. Best Answer

    本着这种精神

    .block {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 400px;
  background-color: #333;
}

.block__square {
  position: absolute;
  bottom: 40px;
  right: -50px;
  border: 20px solid green;
  width: 150px;
  height: 150px;
  transform: rotate(-35deg);
}
    <div class="block">
  <div class="block__square"></div>
</div>

    • 0

相关问题