HTML-треугольник шириной 100%
Я хочу создать размытый треугольник на каждом выбранном эскизе в сетке.
Сейчас я делаю это так (треугольник и его контейнер div):
:host ::ng-deep {
.blurred-triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 400px 200px 0;
border-color: transparent rgba(250, 248, 255, 0.2) transparent transparent;
}
.dashboard-image-selected__container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
Моя проблема - это ширина треугольника. Если изображение слишком велико, треугольник не заполняет ширину.
Как я могу использовать что-то вроде ширины 100% для этой формы треугольника, чтобы она полностью заполняла ширину своего родителя?
Я думаю, вы неправильно поняли мою проблему, она связана не с изображением, а с наложением выделения, которое представляет собой размытый треугольник.
Можете ли вы также поделиться своим html и ожидаемым результатом
Ответы 2
Вы можете использовать vw, чтобы сделать треугольник CSS отзывчивым. Он установит ширину треугольника в зависимости от ширины экрана.
Может быть лучше использовать что-то вроде calc (30vw + 100px) и calc (15vw + 50px), если вам нужно установить минимальную ширину по какой-либо причине. Однако это сделает треугольник больше, чем контейнер, поэтому в этом случае вам нужно будет использовать overflow: hidden.
.blurred-triangle {
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 0 30vw 15vw 0;
border-color: transparent rgba(250, 248, 255, 0.32) transparent transparent;
}
.dashboard-image-selected__container {
position: absolute;
top: 0;
left: 0;
width: 30%;
height: 100%;
overflow: hidden;
background-color: red;
}<div class = "dashboard-image-selected__container">
<div class = "blurred-triangle"></div>
</div>Вы имеете в виду что-то вроде следующего:
img {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
img:hover {
opacity: .8
}<img src = "//cdn.pixabay.com/photo/2018/07/20/22/43/adler-3551609_960_720.jpg">Ах, клип-путь. Я использовал это некоторое время назад, когда он только выходил. Насколько хорошо это поддерживается в наши дни?
@Sarcoma согласно caniuse.com/#feat=css-clip-path не очень хороша, если вы хотите поддерживать IE / edge, то есть.
Хорошее решение, просто имейте в виду, что оно еще не поддерживается в Edge и IE 11: caniuse.com/#search=clip
Интересное решение. но поддержка IE важна в моем случае. Также здесь можно настроить непрозрачность? В моем случае форма должна только создавать эффект стекла, а не полностью скрывать изображение.
@ An-droid проверьте обновление, чтобы убедиться, что можно добавить непрозрачность.
Вы можете попробовать подогнать изображение под объект. w3schools.com/css/css3_object-fit.asp