Custom <div> tags with background images

Question

I am trying to implement a popover project. Each popover has a header with a dynamically created background image on it. The design requires a pointer at the top of the title, but I can't figure out how to implement this and maintain the background image.

Here's the current markup, without a pointer:

<div class="popup"> <header class="popup-header" style="background-image: url(http://thebusstopsherefoundation.com/images/bettis_wave.jpg);"> <h1> <a class="resourceName" href="" target="_blank"></a> </h1> <div class="overlay"></div> </header> <main class="popup-body"> <section class="details"> <div class="resourceDescription"> <p></p> </div><!-- /resource-description--> <div class="attributes"> </div><!-- attronites--> </section><!-- / details--> <section class="organization"> <h3>Organization Information</h3> <h2 class="orgName"> <a href="" target="_blank"></a> </h2> <div class="orgDescription"> </div><!-- /orgdescription--> </section><!-- /organization--> </main> <section class="cta"> <a class="btn" href="" target="_blank">Participate</a> </section><!-- cta--> </div><!--popup--> 

Every CSS form implementation that I know of requires borders or box shadows, none of which will apply here. Any idea on how to implement this?

Answer 1

This can be achieved with a css click and using the polygon as a parameter. Here is an example:

 <div class="dialog"></div> 

And CSS

 .dialog{ position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; width: 500px; height: 200px; background-color: #d3d0c9; background-image: url(http://lorempixel.com/400/200/sports/1/Dummy-Text/); background-size: cover; background-position: center center; -webkit-clip-path: polygon(0% 25%, 85% 25%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(0% 25%, 85% 25%, 100% 0%, 100% 100%, 0% 100%); } 

 <div class="dialog"></div> 

Browser support is limited to modern browsers .

You can play with this tool: http://bennettfeely.com/clippy/

Answer 2

It uses a solution that uses transform to achieve the desired angle effect. Although the solution is more complex than adopted, it can be implemented in almost all modern browsers. Using several transform poly-fields, the solution can be implemented in all directions.

The algorithm underlying this solution reaches the corner element through the skewX() transformation, which is equally applied to the image (set as the background) and its container only in different directions (for example, -63.43deg and 63.43deg , depending on the size of the corner item). Then the generated corner element is perfectly aligned with the background of the header.

Here's the fiddle: http://jsfiddle.net/bLbt11a3/ .

HTML:

 <div class = "popup"> <header> <h1>DIY Gardener</h1> <div class = "corner-holder"> <div class = "corner"></div> </div> </header> </div> 

CSS

 * { margin: 0; padding: 0; border: 0; } body { padding: 10px; background-color: #eee; } .popup { box-shadow: 0 0 10px #ccc; height: 240px; width: 186px; position: fixed; top: 50px; background-color: #fff; } .popup h1 { font: bold 20px/3 Sans-Serif; color: #fff; padding: 0 20px; background: url(http://thebusstopsherefoundation.com/images/bettis_wave.jpg) no-repeat -80px -90px/600px; } .popup header { position: relative; } .corner-holder { position: absolute; right: 0; top: 0; height: 30px; width: 60px; overflow: hidden; transform: translateY(-100%); } .corner-holder .corner, .corner-holder .corner:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: bottom left; /* webkit trick to get rid of jagged edges */ -webkit-backface-visibility: hidden; } .corner-holder .corner { overflow: hidden; transform: skewX(-63.43deg); } .corner-holder .corner:before { content: ""; background: url(http://thebusstopsherefoundation.com/images/bettis_wave.jpg) no-repeat -206px -60px/600px; transform: skewX(63.43deg); }