× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Semi-transparent background for div skewed only on one side

web-tiki
May 05, 2015
<p>You can use a pseudo element for all the background and hide the overflowing parts with the overflow property on the element. </p> <p>This will prevent element and pseudo element background overlapping and allow semi transparent backgrounds:</p> <p><img src="http://i.stack.imgur.com/WCgWH.png" alt="div skewed on one side and semi transparent background"></p> <p></p><div class="snippet"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>div { position: relative; width: 250px; font-size: 20px; border-radius: 4px; overflow: hidden; color: #fff; padding: 1% 2%; } div:before { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: rgba(220, 50, 255, 0.6); -webkit-transform-origin:100% 0; -ms-transform-origin:100% 0; transform-origin: 100% 0; -webkit-transform: skewX(-10deg); -ms-transform: skewX(-10deg); transform: skewX(-10deg); border-radius: 4px 4px 6px; z-index: -1; } /** FOR THE DEMO **/body {background: url('http://lorempixel.com/output/people-q-g-640-480-3.jpg');background-size: cover;}</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;content&lt;/div&gt;</code></pre> </div> </div> <p></p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/30026450/Semi-transparent%20background%20for%20div%20skewed%20only%20on%20one%20side/30026643">Stack Overflow</a>.</p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus