How best to implement such a triangle with a part of the image.

enter image description here

Initially I tried to overlap with the background .png image. But such a decision is not the most practical.

enter image description here

Can there be any simple options? Examples do not necessarily enough brief description or thoughts on this matter.

  • one
    what prevents you from setting background: inherit; for your pseudo-element? - Ares
  • one
    Or you can do something like this: codepen.io/jackmoran/pen/dBKGq - Ares
  • one
    Example 2: codepen.io/poopsplat/pen/emxPrw - Ares
  • one
    In the examples is the placement of strips. There will be the same problem as in the second image. - Alexey Giryayev

3 answers 3

This option is probably for you.

Here with two pseudo-elements before , after .

And of course you can remove the hover effect. This is for your taste.

 .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>

Here is another example. The implementation is about the same as in the previous example.

 *: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>

The third example.

Here the truth is only a triangle with a background image. But it may be useful to someone.

 .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>

This option converts a portion of a common container into a triangle.

 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>

  • Try to place in an example any image. What happens to the triangle? - Alexey Giryayev
  • @AlexeyGiryayev And is it already appropriate? - Raz Galstyan
  • An example is taken from the comments in question. It does not fit, because there will be the same problem as in the second image. - Alexey Giryayev
  • @AlexeyGiryayev there is no example from there. I do not see the comments, if they are not written to me. - Raz Galstyan
  • Thanks for participating. I previewed all these options on Codepen and not only before asking a question. None of them will allow to realize the task from the screenshots. - Alexey Giryayev 1:16 pm

Another option:

 <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>

PS: take the implementation from facebook (hover to user profile)

  • I have thought about the variant with svg, but, in the last turn, I will use it if there is no more flexible option. - Alexey Giryayev
  • @AlexeyGiryayev look at the implementation on Facebook. - Ares

So, the best solution for my needs would be such options:

 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>

This is the pad that was used in the first version and in the version with SVG:

enter image description here

For the second and third options, you can create a shadow using filter: drop-shadow . For my personal purposes, I used the pseudo-element variant, since there is no darkening and background fading out of sight, and the image itself can be scaled as you like.

enter image description here

Support for mask - CSS Masks

Support for clip-path - CSS clip-path property

Support for SVG at a height)