Граница изображения, которая охватывает только половину нижнего и половину правого края

#html #css #responsive-design

Вопрос:

Я пытаюсь отобразить такую фотографию на веб-странице:

Если кто-нибудь знает более простой способ достичь этого, пожалуйста, поделитесь. Это то, что у меня есть до сих пор:

 .border-box{
        height: 300px;
        margin-top: -65%;
        width: 75%;
        float: right;
        margin-right: -8%;
        border-bottom: 2px solid #004689;
        border-right: 2px solid #004689;
        background: #004689 0% 0% no-repeat padding-box;
        opacity: 1;
    }

 <div class="about-us-body-img">
        <div class="about-img"><img src="https://picsum.photos/200"></div>
        <div class="border-box"></div>
    </div>

Это работает очень хорошо, ребята, но моя проблема в том, что я не могу использовать % для значения высоты .border-box(как у меня с шириной). Поэтому, когда я использую 300 пикселей, он не реагирует, и на маленьких экранах граница становится примерно в три раза больше, чем изображение.

Как я могу использовать % в значении высоты или как я могу настроить высоту соответственно для каждого размера экрана? Или есть более простой способ достичь всего этого?

1. ведьма-это about-us-body-img , about-img CSS ?

2. что-то, что вы можете сделать, это создать 4 div.родительское положение погружения относительно.и 3 div внутри с абсолютным положением и с z-индексом, вы можете создать это изображение с процентами и чем угодно.верхний угол lerf zindex 100 основное изображение zindex 90 синий квадрат zindex 80, например

3. jsfiddle.net/76psmLfh

Ответ №1:

Решение, использующее только тег изображения:

 img {
  /* add bottom border */
  padding:0 20px 20px 0;
  background:linear-gradient(blue 0 0) 100% 100% / 60% 60% no-repeat;
  /* cut top corner */
  clip-path:polygon(30% 0,100% 0,100% 100%,0 100%,0 30%);
}

 <img src="https://picsum.photos/200">

Ответ №2:

 .main {
  width: 300px;
  height: 300px;
  background: red;
  position: relative;
}
.middle {
  position: absolute;
  width: 90%;
  height: 90%;
  top: 0;
  left: 0;
  z-index: 90;
  background: black;
}
.top {
  width: 0; 
  height: 0; 
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent; 
  border-right:20px solid blue; 
  z-index: 100;
  top:-13px;
  left:-3px;
  position: absolute;
  transform: rotate(45deg);
}
.bottom {
  width:50%;
  height:50%;
  background: yellow;
  position:absolute;
  bottom:0;
  right:0;
  z-index: 80;
}

 <div class="main">
   <div class="top">
   
   </div>
   <div class="middle">
   
   </div>
   <div class="bottom">
   
   </div>
</div>

Ответ №3:

может быть, ты сможешь сделать вот так

 <style>
  .about-img {
    width: 200px;
    height: 200px;
  }
  
  .border-box {
    background-color: blue;
    width: 150px;
    height: 150px;
    margin-top: -130px;
    margin-left: 70px;
  }
</style>