I am trying to create this shape with html/css:
My requirements are:
With sharp corners you could do it with css triangles, but the rounded ones give me trouble.
What I have so far in HTML:
<ul class="tags">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Longer text in tag</a></li>
<li><a href="#">Dolor</a></li>
</ul>
In CSS:
.tags {
list-style: none;
margin: 0;
padding: 1em;
}
.tags li {
display: inline-block;
margin-right: 2em;
position: relative;
}
.tags a {
background: #283c50;
color: #fff;
display: block;
line-height: 1em;
padding: 0.5em;
text-decoration: none;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
-webkit-transition: background 200ms ease;
-moz-transition: background 200ms ease;
-o-transition: background 200ms ease;
-ms-transition: background 200ms ease;
transition: background 200ms ease;
}
.tags a:before {
background: #283c50;
content: "";
height: 1.75em;
width: 1.75em;
position: absolute;
top: 0.1em;
right: -0.87em;
z-index: -1;
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-o-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-border-radius: 0.625em;
-moz-border-radius: 0.625em;
-o-border-radius: 0.625em;
-ms-border-radius: 0.625em;
border-radius: 0.625em;
-webkit-transition: background 200ms ease;
-moz-transition: background 200ms ease;
-o-transition: background 200ms ease;
-ms-transition: background 200ms ease;
transition: background 200ms ease;
}
.tags a:hover,
.tags a:hover:before {
background: #1eaa82;
}
It only looks ok on Chrome. For others, there are either differences in the triangle position or transition occurs at different times for the triangle and the actual tag. See example http://jsfiddle.net/hfjMk/1/
Is this even possible/feasible? Or do I have to discard the transition and use an image for the triangle part?
Just add the border-radius:50%; to circular_image Class.
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
You could use a rotated pseudo element for this:
div {
height: 50px;
width: 150px;
border-radius: 10px 0 0 10px;
position: relative;
background: tomato;
text-align:center;
line-height:50px;
}
div:before {
content: "";
position: absolute;
top: -4px;
right: -41px;
height: 41px;
width: 41px;
transform-origin: top left;
transform: rotate(45deg);
background: tomato;
border-radius: 10px;
}
<div>Text</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With