(Though Ana’s answer came in months after mine, probably using mine as a base to “think from”, the fact that she was able to come up with a method using a single div is worth promoting, so check out her answer too–but note that content in the hex is more limited.) This was a truly … Read more
skew a parent element (li in this example) and inverse skew its child elements: nav ul { padding: 0; display: flex; list-style: none; } nav li { transition: background 0.3s, color 0.3s; transform: skew(20deg); /* SKEW */ } nav li a { display: block; /* block or inline-block is needed */ text-decoration: none; padding: 5px … Read more
If the parent element has a solid color background, you can use pseudo-elements to create the effect: div { height: 300px; background: red; position: relative; } div:before { content: ”; position: absolute; top: 0; right: 0; border-top: 80px solid white; border-left: 80px solid red; width: 0; } <div></div> http://jsfiddle.net/2bZAW/ P.S. The upcoming border-corner-shape is exactly … Read more
Can border be applied to a clipped element along the clip path? No, adding border property to the clipped element would not apply the borders along the clipped path because the border is applied to the original rectangle (or square) container before the clip-path is applied and so, it also gets clipped out. You can … Read more
You can achieve a transparent cut out circle with 2 different techniques : 1.SVG The following examples use an inline svg. The first snippet uses the mask element to cut out the transparent circle and the second hollow circle is made with a path element. The circle is made with 2 arc commands : With … Read more
Assuming <div id=”content”>CONTENT</div> and that CONTENT includes at least one HTML node. #content {position:relative} #content:before, #content:after, #content>:first-child:before, #content>:first-child:after { position:absolute; content:’ ‘; width:80px; height: 80px; border-color:red; /* or whatever colour */ border-style:solid; /* or whatever style */ } #content:before {top:0;left:0;border-width: 1px 0 0 1px} #content:after {top:0;right:0;border-width: 1px 1px 0 0} #content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px … Read more
Here’s an example with a box-shadow, all latest version browsers should support this http://jsfiddle.net/MZXCj/1/ HTML: <div id=”toolTip”> <p>i can haz css tooltip</p> <div id=”tailShadow”></div> <div id=”tail1″></div> <div id=”tail2″></div> </div> CSS: body {font-family:Helvetica,Arial,sans-serif;} #toolTip { position:relative; } #toolTip p { padding:10px; background-color:#f9f9f9; border:solid 1px #a0c7ff; -moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px; } #tailShadow { position:absolute; bottom:-8px; left:28px; width:0;height:0; border:solid 2px #fff; … Read more
Applying a very large border radius seems to work on many browsers (IE9+, FF, Chrome) like this mod of David’s fiddle http://jsfiddle.net/cthQW/1/ border-radius: 500px;
You can draw two rectangles and place them next to each other. And then rotate by 45 degrees. Modify the width/height/top/left parameters for any variation. DEMO 1 DEMO 2 (With circle) HTML <span class=”checkmark”> <div class=”checkmark_stem”></div> <div class=”checkmark_kick”></div> </span> CSS .checkmark { display:inline-block; width: 22px; height:22px; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* … Read more
There are many ways to create the shape with a slanted edge only on one side. The following methods cannot support dynamic sizes as already mentioned in the question: Border triangle method with pixel values for border-width. Linear gradients with the angle syntax (like 45deg, 30deg etc). The methods that can support dynamic sizes are … Read more