Треугольник с частью изображения
287
15 января 2018, 07:08
Как лучше всего реализовать такой треугольник с частью изображения.
Изначально попробовал перекрыть с фоновым .png изображением. Но, такое решением не самое практичное.
Могут ли тут быть какие-то простые варианты? Примеры делать не обязательно, достаточно краткого описания или мыслей на этот счет.
Answer 1
Вот этот вариант наверное подойдет вам.
Здесь с двумя псевдоэлементами before, after.
Ну и конечно же можете убрать hover эффект. Это уже на ваш вкус.
.box {
margin: 0 auto;
max-width: 600px;
background: #fff;
border: 1px solid #ccc;
}
.content {
padding: 32px 42px;
border-radius: 0 0 3px 3px;
}
.content h1 {
color: #444;
margin-top: 0;
}
.image {
width: 100%;
overflow: hidden;
padding: 0 0 30%;
position: relative;
-webkit-transition: padding 0.5s ease-out;
transition: padding 0.5s ease-out;
background-image: url("https://avatars.mds.yandex.net/get-pdb/33827/ad46348d-6f2a-4c51-9866-d1b119498e8c/s800");
background-size: cover;
}
.image:hover {
padding-bottom: 35%;
}
.image::before {
left: 0;
bottom: 0;
content: "";
width: 32px;
position: absolute;
border-bottom: 12px solid #fff;
border-right: 12px solid transparent;
}
.image::after {
bottom: 0;
left: 44px;
content: "";
width: 100%;
position: absolute;
border-bottom: 12px solid #fff;
border-left: 12px solid transparent;
}<div class="box">
<div class="image">
</div>
<div class="content">
<h1>What is Lorem Ipsum?</h1>
</div>
</div>Вот еще один пример. Реализация примерно такая же как в предыдущем примере.
*:before,*:after {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
body {
background-color:#ddd;
}
.outer {
max-width:960px;
margin:0 auto;
}
.paneltop {
height:68px;
background-color:#f00;
}
.car {
width:100%;
height:auto;
position:relative;
}
.car:after {
content:"";
display:block;
width:0;
border-top:48px solid #f00; /* downward pointing red arrow */
border-right:48px dotted transparent;
border-left:48px dotted transparent;
position:absolute;
top:0;
left:0;
right:0;
margin:0 auto;
}
.car img {
display:block;
width:100%;
height:auto;
}
.panelbottom {
height:28px;
background-color:#ff0;
}
.panelbottom:before,
.panelbottom:after {
content:"";
width:50%;
border-bottom:48px solid #ff0;
margin-top:-48px;
position:relative;
}
.panelbottom:before {
border-right:48px dotted transparent;
float:left;
}
.panelbottom:after {
border-left:48px dotted transparent;
float:right;
}<div class="outer">
<div class="paneltop"></div>
<div class="car"><img src="https://avatars.mds.yandex.net/get-pdb/33827/ad46348d-6f2a-4c51-9866-d1b119498e8c/s800" alt="concept car" width="960" height="480"></div>
<div class="panelbottom"></div>
</div>Третий пример.
Здесь правда только треугольник с фоновым изображением. Но может кому то пригодиться.
.kwadrat
{
width: 232px;
height: 180px;
border-bottom: 1px solid #000;
overflow: hidden;
}
.trojkat
{
position: relative;
overflow: hidden;
transform: rotate(45deg) skew(10deg,10deg);
border-left: 1px solid #000;
border-top: 1px solid #000;
width: 200px;
height: 200px;
margin:81px 0 0 16px;
}
.trojkat_bg
{
position: absolute;
width: 200%;
height: 200%;
top: -67%;
left: -50%;
z-index: -1;
background: url(https://avatars.mds.yandex.net/get-pdb/33827/ad46348d-6f2a-4c51-9866-d1b119498e8c/s800);
background-size: 100%;
background-position: center top;
transform: skew(-10deg,-10deg) rotate(-45deg) ;
transition: .3s;
}
.trojkat_bg:hover{ background-size: 90%; }
.kwadrat2
{
width: 232px;
height: 170px;
border-top: 1px solid #000;
overflow: hidden;
margin-top: 5px;
}
.trojkat2
{
position: relative;
overflow: hidden;
transform: rotate(45deg) skew(10deg,10deg);
border-bottom: 1px solid #000;
border-right: 1px solid #000;
width: 200px;
height: 200px;
margin:-100px 0 0 16px;
}
.trojkat_bg2
{
position: absolute;
width: 240%;
height: 200%;
top: 17%;
left: -50%;
z-index: -1;
background: url(https://avatars.mds.yandex.net/get-pdb/33827/ad46348d-6f2a-4c51-9866-d1b119498e8c/s800);
background-size: 100%;
background-position: center top;
transform: skew(-10deg,-10deg) rotate(-45deg) ;
transition: .3s;
}
.trojkat_bg2:hover{ background-size: 90%; }<div class="kwadrat">
<div class="trojkat">
<div class="trojkat_bg"></div>
</div>
</div>
<div class="kwadrat2">
<div class="trojkat2">
<div class="trojkat_bg2"></div>
</div>Этот вариант преобразует часть общего контейнера в треугольник.
p {
color: #fff;
padding: 0 12px;
width: 280px;
}
.triangle-fluid {
background: transparent url("http://placekitten.com/g/1200/500") center center;
background-size: cover;
overflow: hidden;
}
.triangle-container {
box-sizing: border-box;
padding: 5%;
position: relative;
}
.triangle {
background: none;
border: 0 solid transparent;
height: 0;
position: absolute;
top: 0;
width: 0;
}
.triangle-left {
border-left-color: #fff;
border-left-width: 4000px;
border-top-width: 720px;
left: 0;
}
.triangle-right {
border-right-color: #fff;
border-right-width: 4000px;
border-top-width: 720px;
right: 0;
}<div class="triangle-fluid">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis nihil est repudiandae, facere amet iusto aliquid iste! Inventore, est, consequatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis accusantium blanditiis officiis.</p>
<div class="triangle-container">
<div class="triangle triangle-left"></div>
<div class="triangle triangle-right"></div>
</div>
</div>Answer 2
Еще как вариант:
<div class="wrap">
<svg id="lbox" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 400">
<defs>
<clipPath id="clip">
<path d="M0 0 H600 V380 H320 L300 400 L280 380 H0z" />
</clipPath>
</defs>
<image xlink:href="https://www.w3schools.com/w3css/img_fjords.jpg" width="600" height="400" clip-path="url(#clip)"/>
<path d=""/>
<text x="50%" y="50%" text-anchor="middle" stroke="#000" stroke-width="1px" font-size="36" dy=".3em">Твой красивый текст</text>
</svg>
</div>P.S: возьми реализацию с facebook (hover на профиль пользователя)
Answer 3
Итак, наилучшим решением для моих потребностей будут такие варианты:
body {
margin: 0;
padding: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: #f6f6f6;
}
div {
position: relative;
width: 140px;
height: 288px;
background-position: center;
background-size: cover;
margin: 10px;
}
svg {
margin: 10px;
-webkit-filter: drop-shadow(0 5px 15px rgba(0,0,0,0.15));
filter: drop-shadow(0 5px 15px rgba(0,0,0,0.15));
}
/* Делается накладка целиком на изображение. Минусом является отсутсвие возможности создать тень и невозможность масштабирования, точнее, сложности с масштабированием */
.mask {
mask: url(https://i.stack.imgur.com/V3TDk.png) no-repeat;
-webkit-mask: url(https://i.stack.imgur.com/V3TDk.png) no-repeat;
}
/* Тут мы создаем небольшой треугольник перенося фон из основного блока, а затем создаем для него обрезку по краям. Поддержка IE отсутсвует и cover не подходит для реализации, так как фон треугольника нужно четко подставить к основному изображению. */
.pseudo-triangle {
height: 280px;
border-radius: 10px;
background-position: left -7px;
background-size: auto 287px;
}
.pseudo-triangle:before {
content: '';
position: absolute;
left: 20px;
top: 100%;
display: block;
width: 14px;
height: 7px;
background-image: inherit;
background-position: -27px bottom;
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
clip-path: polygon(50% 100%, 0 0, 100% 0);
}<div class="mask" style="background-image: url(https://i.pinimg.com/564x/09/2f/ce/092fcef43b02deb893b57f8319def13b.jpg)">
</div>
<div class="pseudo-triangle" style="background-image: url(https://i.pinimg.com/564x/ee/88/d8/ee88d8e5aace7b37122a61ea88f38880.jpg)"></div>
<svg width="140" height="288">
<clipPath id="clipping">
<path d="M130,0H10A10.0294,10.0294,0,0,0,0,10V270a10.0294,10.0294,0,0,0,10,10H20l5.629,5.629a2.0059,2.0059,0,0,0,2.8284,0L34.0864,280H130a10.0294,10.0294,0,0,0,10-10V10A10.0294,10.0294,0,0,0,130,0Z" />
</clipPath>
<image
style="clip-path: url(#clipping);height:100%;"
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="https://i.pinimg.com/564x/09/b1/e2/09b1e2502eb61cc5d3f47faed92cef56.jpg"
>
</image>
</svg>Это накладка которая использовалась в первом варианте и в варианте с SVG:
Для второго и третьего варианта можно создать тень при помощи filter: drop-shadow. Для своих личных целей я использовал вариант с псевоэлементом, так как есть затемнение и разбежности фона не видно совсем, а само изображение можно масштабировать как угодно.
Поддержка для mask - CSS Masks
Поддержка для clip-path - CSS clip-path property
Поддержка для SVG на высоте)
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47903 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30566 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23894 visits
- Как через css изменить цвет png изображения? 10396 visits
- Blob video url download 10003 visits
- Php curl запрос через прокси с авторизацией 9272 visits
- Работа с captcha vk api 8144 visits
© "hostciti.net" 23.3.2025 | 09:23