This question already has answers here:
border curved css - circle with curved end
(2 answers)
Border-radius CSS property curve outside
(1 answer)
Closed 3 years ago.
Hi I am looking for the most efficient way to create a "tab" with HTML/CSS with rounded corners but also a smooth, rounded transition to the base.
Example:
I came up with a solution using two elements on both side of the tab having a CSS gradient
.tab {
border: none;
height: 100%;
width: 300px;
line-height: 100px;
text-align: center;
background-color: #BCC6CC;
display: inline-block;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
}
.tab-base-right {
width: 50px;
height: 50px;
line-height: 100px;
display: inline-block;
background-image: radial-gradient(circle at 100% 100%, rgba(0,0,0,0) 50px,#BCC6CC 50px );
border: none;
}
see my solution on Codepen
I wonder if there is any better/nicer way to achieve that.
Use css psuedo elelmts to achieve the same,
ul.rounded-tabs {
list-style-type: none;
border-top:5px solid #333;
}
ul.rounded-tabs li {
display: inline-block;
background: #ccc;
margin: 0 40px;
padding: 0.625rem 2rem;
position: relative;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
cursor: pointer;
}
ul.rounded-tabs li:after,
ul.rounded-tabs li:before {
content: '';
height: 20px;
width: 20px;
background: #ccc;
position: absolute;
top: 0;
right: -20px;
z-index: 1;
}
ul.rounded-tabs li:before {
right: auto;
left: -20px;
}
ul.rounded-tabs li span:after,
ul.rounded-tabs li span:before {
content: '';
height: 40px;
width: 40px;
background: #fff;
position: absolute;
top: 0;
right: -40px;
z-index: 2;
border-radius: 50%;
}
ul.rounded-tabs li span:before {
right: auto;
left: -40px;
}
<ul class="rounded-tabs">
<li><span>Tab1</span></li>
<li><span>Tab2</span></li>
<li><span>Tab3</span></li>
</ul>
Related
This question already has answers here:
one sided skew with css
(2 answers)
Closed 4 years ago.
I am trying to make a div element to look like this:
So how can I apply the skew transform property so that only one side(the bottom one here) gets tilted?
Try this code
a {
color: white;
}
.title {
position: relative;
width: 120px;
padding: 45px 20px 10px 10px;
font-size: 20px;
position: relative;
color: #FFF;
background: Grey;
}
.title:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 230%;
top: 0;
left: 0;
z-index: -1;
background: Grey;
transform-origin: bottom right;
transform: skew(0deg,-20deg);
}
<div class="title">
</div>
You can a triangle using the border trick on a ::before pseudo element.
div {
position: relative;
padding: 30px;
background-color: gray;
width: 30px;
}
div::before {
position: absolute;
content: '';
bottom: -120px;
right: 0;
width: 0;
height: 0;
border-top: 60px solid gray;
border-bottom: 60px solid transparent;
border-right: 90px solid transparent;
}
<div>Hello world</div>
This question already has an answer here:
Achieving this hr element with CSS styling - pseudo elements
(1 answer)
Closed 6 years ago.
I'm attempting to style an hr tag to have end caps like the attached image. While I could just remove the background from that image and set that as background, that won't change width with the page. At the moment, how to get this correctly made is eluding me.
Image of the desired hr.
Here you go. https://jsfiddle.net/mkarajohn/sfr5kw4e/
hr {
height: 4px;
background: black;
border: none;
position: relative
}
hr::before,
hr::after {
position: absolute;
content: '';
width: 12px;
height: 12px;
border-radius: 100px;
background: black;
bottom: -4px;
}
hr::before {
left: 0;
}
hr::after {
right: 0;
}
Think if you really need an hr though, instead of a simple div
You could use before, after pseudo elements. Something like:
hr:before {
content: "";
position: absolute;
display: block;
width: 6px;
height: 6px;
background-color: blue;
top: 6px;
left: 6px;
border-radius: 50%;
}
See this codepen http://codepen.io/anon/pen/dMpJXR
Use before and after pseudo classes:
Key to styling an <hr> is also to replace the embossed line with a border. The round endcaps are done by rendering before and after blocks with a border-radius that makes them circles:
hr {
border: 0 solid black;
border-top-width: 3px;
height: 0;
margin-top: 10px;
margin-bottom: 60px;
float: left;
clear: both;
display: block;
width: 100%;
position: relative;
}
hr:before, hr:after {
content: " ";
width: 10px;
height: 10px;
position: absolute;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 1px solid black;
background-color: black;
}
hr:before {
left: 0;
bottom: -4px;
}
hr:after {
bottom: -4px;
right: 0;
}
Here's a JSBin
This is my code
.privacycheck1 {
position: relative;
top: 265px;
background-color: #CF0000;
width: 24px;
height: 24px;
left: 843px;
border-radius: 50px;
border: 5px #E60000;
}
.privacycheck1::before {
position: relative;
display: block;
height: 20px;
width: 200px;
left: 30px;
}
.privacycheck1:hover::before {
content: 'This information is private';
width: 125px;
height: 35px;
background-color: #CF0000;
left: 40px;
top: -10px;
font-family: arial;
font-size: 15px;
font-weight: 100px;
color: white;
padding: 10px;
}
<div class="privacycheck1"></div>
I want to make it so when someone hovers over the privacycheck1, I want them to see an arrow connecting to the box pointing at privacycheck1's circle.
Is there anyway to make a class in a class?
You can use an extra span element to create this.
First create the tail of the arrow using the span and then create the arrow head using the border-hack on the after pseudo-element. You can find a wide range of arrows here
.privacycheck1 {
position: relative;
top: 30px;
background-color: #CF0000;
width: 24px;
height: 24px;
left: 30px;
border-radius: 50px;
border: 5px #E60000;
}
.privacycheck1::before {
position: relative;
display: block;
height: 20px;
width: 200px;
left: 30px;
}
.privacycheck1:hover::before {
content: 'This information is private';
width: 125px;
height: 30px;
background-color: #CF0000;
left: 40px;
top: -10px;
font-family: arial;
font-size: 15px;
font-weight: 100px;
color: white;
padding: 10px;
}
.arrow {
position: absolute;
width: 15px;
height: 5px;
background: green;
left: 20px;
top: 8px;
display:none;
}
.arrow:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid green;
left:15px;
top:-2px;
display:none;
}
.privacycheck1:hover span,.privacycheck1:hover span:after{
display:block;
}
<div class="privacycheck1"><span class="arrow"></span>
</div>
You don't need an extra span. You can use an :after just like you used a :before.
.privacycheck1:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 100%;
width: 0;
height: 0;
margin-top: -15px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #CF0000;
}
If you use top: 50%; and margin-top negative half the arrow height it will always be perfectly aligned in the vertical center. In this case I gave the arrow height: 30px; so the margin-top is -15px
Oh and you made a mistake in you hover:before. 'font-weight: 100px;' doesn't exist, you can use 'bold', '700' or another value.
Another tip, add this to your hover:before
left: calc(100% + 15px);
This way your box will always have the right distance between the 'dot' and the text box. The box will use the width of the parent (the element with position: relative;) + 15px (the width of the arrow) to align from the left.
I have a problem that is best illustrated with an image. I have the turquoise block already, but i want this darker area which is inside the red circle. I would prefer an CSS-only solution if this is possible.
My code so far is this: http://jsfiddle.net/3D2g7/
div {
width: 200px;
height: 200px;
background-color: #000;
}
.image-container {
position: relative;
}
.image-container span {
position: absolute;
background-color: #00b9e5;
padding: 7px 17px;
top: 7px;
left: -9px;
border-top-left-radius: 7px;
color: #fff;
text-transform: uppercase;
}
http://jsfiddle.net/HeT72/2/
Use the :after pseudo selector to position the bottom curved border under the span element.
div {
width: 200px;
height: 200px;
background-color: #000;
}
.image-container span {
color: #fff;
text-transform: uppercase;
padding: 7px 17px;
display: inline-block;
background-color: #00b9e5;
position: relative;
left: -7px;
border-top-left-radius: 7px;
}
.image-container span:after {
position: absolute;
left:0;
z-index:-1;
background-color: #095F72;
padding: 7px 17px;
border-bottom-left-radius: 7px;
display: block;
content:'';
}
I want to show three horizontal dots (I've made a demo on jsfiddle)
span {
position: relative;
background-color: blue;
border-radius: 5px;
font-size: 0;
margin-left: 20px;
padding: 5px;
}
span:before {
position: absolute;
left: -10px;
content: '';
background-color: green;
border-radius: 5px;
font-size: 0;
margin-left: 35px;
padding: 5px;
}
span:after {
position: absolute;
right: 0;
content: '';
background-color: grey;
border-radius: 5px;
font-size: 0;
margin-left: 35px;
padding: 5px;
}
I don't know if this is the best way to achieve this. Also, I want them to line-up horizontally. And I don't understand why they aren't. Any suggestion how to fix this ?
Since you are using absolute positioning, you could use top property to position the pseudo generated contents vertically, and play with left property for horizontal alignment
Example Here
span:before {
position: absolute;
left: -20px; /* <-- align the circle horizontally */
top: 0; /* <-- Added declaration */
content: '';
background-color: green;
border-radius: 5px;
font-size: 0;
padding: 5px;
}
span:after {
position: absolute;
left: 20px; /* <-- align the circle horizontally */
top: 0; /* <-- Added declaration */
content: '';
background-color: grey;
border-radius: 5px;
font-size: 0;
padding: 5px;
}
In this case there's no need to use margin of the pseudo-elements.
Additionally, you could avoid negative values for left property to make the circles appear in the right. (Example Here).
//using left instead of right in after
span {
position: relative;
background-color: blue;
border-radius: 5px;
font-size: 0;
margin-left: 20px;
padding: 5px;
}
span:before {
position: absolute;
left: -10px;
content: '';
top: 0;
background-color: green;
border-radius: 5px;
font-size: 0;
margin-left: 35px;
padding: 5px;
}
span:after {
position: absolute;
left: 10px; //using left instead of right
content: '';
background-color: grey;
border-radius: 5px;
font-size: 0;
margin-left: 35px;
top: 0;
padding: 5px;
}
Check this jsFiddle
HTML
<span></span>
CSS
span {
position: relative;
background-color: blue;
border-radius: 5px;
font-size: 0;
margin-left: 20px;
padding: 5px;
}
span:before {
position: absolute;
left: -20px;
top: 0;
content: '';
background-color: green;
border-radius: 5px;
font-size: 0;
padding: 5px;
}
span:after {
position: absolute;
left: 20px;
top: 0;
content: '';
background-color: grey;
border-radius: 5px;
font-size: 0;
padding: 5px;
}