0

**Нужно сверстать чтобы не было отступа справа в toggle device toolbar (емулятор устройств) из за ромба. Вне toggle device toolbar отступа нет и часть ромба уходит вправо неотображаясь **

введите сюда описание изображения

введите сюда описание изображения

   <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>
7
  • overflow: hidden;
    – meine
    24 мая 2020 в 9:24
  • @MaximLensky, можно сверстать, а не картинкой запихивать, так легче
    – meine
    24 мая 2020 в 9:48
  • @MaximLensky, что?
    – meine
    24 мая 2020 в 10:00
  • @MaximLensky, ничего не понял) div + border
    – meine
    24 мая 2020 в 10:05
  • При overflow: hidden; все также как и без него вопрос не решился 24 мая 2020 в 13:05

1 ответ 1

0

в таком духе

.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>

3
  • Еще было бы интересно как сделать такую фигуру отзывчивой ???., то есть , задавал высоту и ширину фигуры в процентах, но при изменении ширины браузера она не "резинится", верстаю адаптив внутри резины. 27 мая 2020 в 13:04
  • @YaroslavBondar, сделайте через vw
    – meine
    28 мая 2020 в 5:49
  • Скузі. What is vw ? 3 июн 2020 в 18:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.