Создать коробку с диагональным краем

Question

Мне нужно создать коробку с диагональным краем. Ниже приведена фотография и here is a link to it.

Как бы я сделать это, используя только CSS и HTML?

Я знаю, что можно создавать треугольники в CSS, поэтому, возможно, я создаю один div с закругленными углами для «желтой» части окна. Однако не знаю, как сделать внутреннюю серая часть.

Я хотел бы избежать решения с несколькими изображениями, потому что это будет на мобильных устройствах, чтобы оно загружалось как можно быстрее.

Я ищу решение с 3 div внутри, а один из которых является треугольником, я нашел создателя треугольника here, а может быть, относительное положение на желтом div и абсолютное положение содержимого после этого?

Answer 1

Существует способ для достижения этой формы без необходимости использовать дополнительные элементы также. Я могу понять нежелание использовать несколько изображений, но этот подход использует только несколько фонов и не должен влиять на время загрузки страницы.

В этом подходе мы создаем фон размером linear-gradient меньшего размера и позиционируем его на right top контейнера для достижения эффекта треугольника.

Этот подход также может использоваться со средствами массовой информации без особых проблем.

.shape { 
 
    height: 400px; 
 
    width: 50vw; 
 
    background: linear-gradient(225deg, #F3D56A 50%, transparent 50%), #EFEFEF; 
 
    background-size: 75px 75px; 
 
    background-repeat: no-repeat; 
 
    background-position: right top; 
 
    border-radius: 4px; 
 
    box-shadow: 4px 4px 4px rgba(0, 0, 0, .5); 
 
    border-top: 5px #F3D56A solid; 
 
} 
 
@media (max-width: 300px) { 
 
    .shape { 
 
    width: 150px; 
 
    background-size: 50px 50px; 
 
    } 
 
} 
 
@media (min-width: 301px) and (max-width: 600px) { 
 
    .shape { 
 
    width: 300px; 
 
    background-size: 50px 50px; 
 
    } 
 
}

<div class="shape"></div>

Answer 2

Почему бы вам просто не создать образ и использовать его в качестве фона. Вы можете сделать изображение таким же, как серый и желтый, а затем просто добавить его в свой «ящик».

Answer 3

здесь ссылка на Js скрипку я издевался вверх - это работает довольно хорошо, хотя я не делал весь стиль https://jsfiddle.net/6pcrneat/

.container { 
    width:200px; 
    height:250px; 
    background:#ffffff; 
    border:1px solid #000; 
    position:relative; 
} 
.shape { 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    position: absolute; 
    right: -45px; 
    top: -10px; 
    border-style: solid; 
    width: 0px; 
    height: 0px; 
    line-height: 0px; 
    border-width: 0px 70px 70px 70px; 
    border-color: transparent transparent rgb(243, 213, 106) transparent; 
    moz-transition: .3s; 
    -ms-transition: .3s; 
    -o-transition: .3s; 
} 
.text { 
    margin-top: 100px; 
    text-align: center; 
} 

Edit: Я вернусь к вам на округлый угол треугольника; Я не заметил, что первоначально

Answer 4

HTML:

<div id="content"> 
    <span></span> 
    <p class="title">Gold</p> 
    <p class="subtitle">Starting at</p> 
    <p class="price">$69.99/mo</p> 
    <a href="#" class="button">More Info</a> 
</div> 

CSS

#content { 
    font-family: Helvetica, Serif; 
    width: 440px; 
    height: 460px; 
    background: #EFEFEF; 
    text-align: center; 
    border-radius: 5px; 
    -webkit-box-shadow: 4px 6px 5px 1px rgba(0,0,0,0.41); 
    -moz-box-shadow: 4px 6px 5px 1px rgba(0,0,0,0.41); 
    box-shadow: 4px 6px 5px 1px rgba(0,0,0,0.41); 
    border-top:7px #F3D56A solid; 
} 
#content span { 
    border-style: solid; 
    border-width: 0 110px 110px 0; 
    border-color: transparent #f3d56a transparent transparent; 
    line-height: 0px; 
    _border-color: #000000 #f3d56a #000000 #000000; 
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); 
    float: right; 
} 
.title { 
    position: relative; 
    left: 50px; 
} 
.title, .price{ 
    color:#2C3E50; 
    font-size: 45px; 
    font-weight: 700; 
    text-align: center; 
} 
.subtitle { 
    color: #7A828B; 
    font-size: 30px; 
    font-weight: 300; 
} 
a.button { 
    text-decoration: none; 
    color:#FFF; 
    background: #F3D56A; 
    padding:20px 30px; 
    border-radius: 5px; 
} 

WORKING DEMO

Update:

Медиа запрос на 320x480:

@media only screen and (min-width: 320px) and (max-width: 480px) { 
    #content { 
     width: calc(100% - 5px); 
     height: 400px; 
    } 
    #content span { 
     border-width: 0 90px 90px 0; 
    } 
} 

Результат: