Блог

Я хотел бы получить следующий результат:

Это два изображения, которые перекрываются.

Я довольно близко подошел к достижению этого с помощью таблицы и заполнения следующим образом:

 <div class="container">
  <table border="1">
    <tr> 
      <th width=500px>
        <div align="center">    
          <img
               src="./img/img_codemesomething.png"
               style="padding-left:100px"
               width=100% />    
        </div>
      </th> 
      <td width=500px>
        <div align="justify">       
          <img
               src="./img/img_recordmesomething.png"
               style="padding-right:100px"
               width=100% />    
        </div>
      </td>
    </tr>
  </table>
</div>
  

Однако в результате оба элемента становятся очень маленькими. Или левый начинает становиться больше правого. Затем я попытался использовать padding для обоих изображений (слева и справа), но padding-right ничего не делает, в то время как padding-left сдвигает изображения вправо, что означает, что они больше не центрированы.

Вот как это выглядит:

(игнорируйте границы).

Если мне нравится результат, как показано на первом рисунке. и чтобы это было точно центрировано по ширине и высоте в браузере — как бы я продолжил об этом?

Спасибо 🙂

*** РЕДАКТИРОВАТЬ:

Css — это не что иное, как:

 .container{
    width:900px;
    margin:auto;
}
  

*** РЕДАКТИРОВАТЬ 2: Хорошо, итак, я подошел довольно близко. Единственная проблема сейчас в том, что все как бы сдвинуто вправо и больше не центрировано, но вот что я сделал:

 <div class="container">
    <div class="centered">
                    <table border="0" width=1400px>
                    <tr> 
                        <td width=500px height=400px>
                            <div>   
                                <img
                                    src="./img/img_codemesomething.png"
                                    style="padding-left:40"
                                    width=210%
                                    height=210%
                                </img>  
                            </div>
                        </td>   
                        <td width=500px height=400px>
                            <div>       
                                <img
                                    src="./img/img_recordmesomething.png"
                                    width=210%
                                    height=210%
                                </img>  
                            </div>
                        </td>   

                </table>
    </div>          
</div>
  

CSS:

 .centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container{
    width:900px;
    margin:auto;
}
  

Результат:

Я пытаюсь расположить его по центру, но я также проверю другое решение. Так что продолжайте в том же духе 🙂

Вот ваше решение в соответствии с вашими требованиями, вы можете использовать изображение вместо цвета.

   <div class="container">
    <div class="traingle">
      <div class="triangle-left">
        <p>Code me something</p>
      </div>
      <div class="triangle-right">
        <p>Record me something</p>
      </div>
    </div>
  </div>
  

css идет сюда

 .traingle{
    position: absolute;
    width: 620px;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.triangle-left {
    width: 300px;
    border-top: solid 180px rgb(200,30,50);
    border-left: solid 0px transparent;
    border-right: solid 180px #00000000;
    margin-right: -156px;
  }
  .triangle-right {
    width: 300px;
    border-top: solid 0px rgb(200,30,50);
    border-left: solid 180px transparent;
    border-bottom: solid 180px rgb(200,30,50);
  }
   .traingle p{
    position: absolute;
    color: #fff;
    font-size: 20px;
    font-family: sans-serif;
   }

 .traingle .triangle-left p{
    top: 0px;
    left: 20px;
}
.traingle .triangle-right p{
    bottom: 0px;
    right: 20px;
}
  

Обратитесь к примеру Codepen

Вы можете реализовать это на основе размеров реальных изображений. Значения 59% и 70% рассчитываются на основе размеров изображения.

 <style>
    .container {
        position: relative;
        /**
         * As we are using absolutely positioned elements, parent element's height will not consider them
         * If you want to use this component inside normal flow of the document, that would mess things up.
         * So to make sure that component occupies the height of its children
         * Calculated as 70 * 59 / 100
         */
        padding-top: 41.3%;
    }
    .imageContainer {
        /**
         * Calculated as (W   W - S) / 2 - G
         * (200 - 100 * (slope.width / image.width)) / 2 - gap
         * Here slope.width / image.width = 0.58
         */
        width: 70%;
        position: absolute;
        top: 0;
    }
    .psuedoContainer {
        position: relative;
        /**
         * To make sure that image always follows the aspect ratio,
         * even if the container width changes.
         * Calculated as 100 * (image.height / image.width) 
         */
        padding-top: 59%;
    }
    .psuedoHolder {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    img {
       height: 100%;
       width: auto; 
    }
</style>

<div class="component">
    <div class="container">
        <div class="imageContainer" style="left: 0;">
            <div class="psuedoContainer">
                <div class="psuedoHolder" style="text-align: left;">  
                    <img src="./img_codemesomething.png" />  
                </div>
            </div>
        </div>
        <div class="imageContainer" style="right: 0;">
            <div class="psuedoContainer">
                <div class="psuedoHolder" style="text-align: right;">
                    <img src="./img_recordmesomething.png" />
                </div>
            </div>
        </div>
    </div>
</div>
  

PS: Вы можете изменить ширину .component , и все остальное будет следовать набору, и вы можете расположить .component его там, где захотите