2

Есть код (приведён ниже), нужно сделать так что бы вместо черной рамки между дивами не было видно, что бы вместо чёрной полосочки была полоса такого же цвета как и светлый квадратик. Я пытался поставить border-top с нужным цветом у квадратного дива но рамка ставиться внутри этого дива, а черная остаётся рядом. Подскажите как это реализовать

.one {
  width: 100px;
  height: 50px;
   background: #735973;
    border: 1px solid #000;
}

.one2 {
  width: 50px;
  height: 50px;  background: #ff5973;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
<DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>        
 <div>
  <div class="one"></div>
  <div class="one2"></div>
</div>
      </div>
    </div>
  </body>        
</html>

1

2 ответа 2

3

ну, а я бы для <div class="one"></div> просто сделал бы margin-bottom: -1px;

3

Можно воспользоваться псевдо-элементом ::after

.one {
  width: 100px;
  height: 50px;
  background: #735973;
  border: 1px solid #000;
}
.one::after {
  display: block;
  content: '';
  border-bottom: 1px solid #ff5973;
  width: 50px;
  position: relative;
  top: 50px;
}
.one2 {
  width: 50px;
  height: 50px;
  background: #ff5973;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
<div>
  <div class="one"></div>
  <div class="one2"></div>
</div>

Либо псевдо-элементом ::before

.one {
  width: 100px;
  height: 50px;
  background: #735973;
  border: 1px solid #000;
}
.one2::after {
  display: block;
  content: '';
  border-bottom: 1px solid #ff5973;
  width: 100%;
  position: relative;
  top: -1px;
}
.one2 {
  width: 50px;
  height: 50px;
  background: #ff5973;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
<div>
  <div class="one"></div>
  <div class="one2"></div>
</div>

Ваш ответ

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

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