Выше приведено изображение проекта, над которым я работаю. Вот как далеко я продвинулся:
Создать коробку было довольно просто; однако теперь я НЕ ПОНЯЛ, как создать этот срезанный угол в левом нижнем углу. Я уже перепробовал кучу вещей, и большинство из них работает, если фон не прозрачен, а представляет собой блок цвета. Поскольку фоном должно быть это изображение, я не могу заставить срезанный угол работать, если одна сторона не имеет определенного цвета. Это мой код:
<div class="profile">
// HTML content
</div>
<style>
profile {
border: 2px solid #fff;
color: #fff;
height: 100%;
padding: 10px;
width: 250px;
</style>
Я уже пробовал несколько вещей, например, здесь (не точный код, который я использовал, но я следовал этому примеру):
.cut {
border: none;
position: relative;
}
.cut:before {
content: "";
position: absolute;
bottom: 0;
right: 0;
border-bottom: 20px solid lightgrey;
border-left: 20px solid #e67e22;
width: 0;
}
Это создает срезанный угол, но с блоком сплошного цвета, и мне нужно, чтобы отображалось изображение, а не цвет.
Кто-нибудь знает, как это сделать? Предложения очень ценятся. Спасибо!