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:'';
}
Related
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>
I am having trouble getting my pseudo element to show up behind the parent element. I am trying to create a button that looks like this:
however I can't figure out how to get the brown to display behind the button. All I'm getting is this:
My styling is:
.orangeBorderedButton{
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
position: relative;
margin:10px 25px;
background-color: transparent;
border-radius: 10px;
border:1px solid white;
z-index: 3;
}
.orangeBorderedButton:after{
position: absolute;
height: 100%;
content: '';
width: 100%;
background-color: $orange;
left: -2px;
bottom: 2px;
border-radius: 10px;
z-index:1;
}
I would just turn your css around and give the background to the button and not the after element, and you should be good.
http://jsfiddle.net/zt4yufx0/28/
body{
background:black;
}
.orangeBorderedButton{
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
position: relative;
margin:10px 25px;
background-color: transparent;
border-radius: 3px;
border-color: transparent;
background-color: #aa7936;
z-index: 5;
padding: 7px 15px 3px 25px;
}
.orangeBorderedButton:after{
position: absolute;
border:1px solid white;
height: 100%;
content: '';
width: 100%;
left: 5px;
bottom: -5px;
border-radius: 3px;
z-index:-5;
}
<a data-sr>
<button class="button large orangeBorderedButton">See All</button>
</a>
Use background color in button CSS and give border to :after, See this code
.orangeBorderedButton{
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
position: relative;
margin:10px 25px;
background-color: #aa7936;
border-radius: 10px;
border: 0px;
z-index: 3;
}
.orangeBorderedButton:after{
position: absolute;
height: 100%;
content: '';
width: 100%;
border:1px solid white;
left: 2px;
top: 2px;
border-radius: 10px;
z-index: 4;
}
I created a simple div for my comments section.
I would like to give it the appearance of a speech bubble by having a triangle on the left or any other effect that would make it look like a speech bubble coming from the left.
How can I achieve that without using an image ?
image
html
<div class='comment'></div>
css
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
overflow: hidden;
}
Try this
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
position: relative;
background-color: #fff;
border:1px solid #000;
}
.comment::before{
content:"";
position: absolute;
top:20px;
left:-12px;
margin:auto;
height: 20px;
width: 20px;
border:1px solid #fff;
transform:rotate(45deg);
background-color: #fff;
border-bottom:1px solid #000;
border-left:1px solid #000;
}
<div class='comment'></div>
style accordingly,
hope this helps...
I hope to help you:
.comment {
position: relative;
margin-left: 50px;
margin-top: 50px;
height: 50px;
display: inline-block;
width: 200px;
padding: 10px;
border-radius: 5px;
background: skyblue;
color: #FFF;
}
.comment:before, .comment:after {
content: '';
border-radius: 100%;
position: absolute;
width: 50px;
height: 50px;
z-index: -1;
}
.comment:after {
background-color: #fff;
bottom: -30px;
left: 55px;
}
.comment:before {
background-color: skyblue;
bottom: -20px;
left: 70px;
}
<div class='comment'>Hello,World!</div>
I like Nicholas Gallagher's work best, see his demo page.
This is lifted off his page and is not my own work.
<style>
/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #000;
background: #f3961c;
border-radius: 10px;
background:linear-gradient(#f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
bottom: -15px;
left: 50px;
width: 0;
border-width: 15px 15px 0;
border-style: solid;
border-color: #f3961c transparent;
}
</style>
<p class="triangle-isosceles">This is a quote. Hello world. text goes here.</p>
i have some CSS styling issues. first thing i have a from with 2 inputs and a button. the button is perfect positiond when i resize the window but the inputs dance around, why?
and het h2 this is appended when the button is pushed, the little arrow has to be always in the middle. Also the text needs to be always in the middle of the pop up, horizontal and vertical. Is this posible? and how?
here is the form:
#lname, #fname {
width: 90%;
height: 50px;
margin-top: 6%;
border-radius: 5px;
background-color: #1e2228;
color: #ddd;
border: 0px;
font-size: 2em;
position: absolute;
text-align: center;
}
#fname {
left: 40px;
top: 18px;
}
#lname {
left: 40px;
top: 84px;
}
#btn {
width: 100%;
height: 50px;
margin-top: 72px;
border-radius: 0 0 5px 5px;
background-color: #1e2228;
color: #ddd;
border: 0px;
font-size: 2em;
position: absolute;
left: 0px;
top: 128px;
}
here is the pop up window:
h2 {
margin: auto;
margin-top: 100px;
position: relative;
width: 50%;
height: 205px;
padding: 0px;
background: #2F3742;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
font-size: 2em;
color: #8092AA;
margin: 100px auto 0 auto;
padding-top: 6%;
}
h2:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0 20px 20px;
border-color: #2F3742 transparent;
display: block;
width: 0;
z-index: 1;
top: -20px;
left: 355px;
}
ofcourse you have to see this in action! here you go! http://codepen.io/shiva112/pen/dGMrWB
Why do you use absolute positioning? It's a really mess, but just add for your input elements margin-left:5%. For your heading arrow: h2:after{left:50%; margin-left:-20px; }And if you want to center the text vertical and horizontal, you need to wrap your h2 text content in span or any other element you like. Then set your h2 element style to: { display:table; width:100%; } and his child element to: { displat:table-cell; vertical-align:middle; }
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.