How to style a rectangular div with elliptical rounded sides?
You can get an ellipse by setting border-radius 50%.
You can get two elements, one inside the other, with different sizes, and so get the 2 ellipses needed
.test {
position: absolute;
left: 40px;
top: 40px;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.test:after {
content: "";
position: absolute;
left: -30%;
top: 10%;
width: 160%;
height: 80%;
background-color: lightblue;
border-radius: 50%;
}
In this case, using an pseudo element , and so, only one div is needed
demo
Have you checked out this website? Try this:
div
{
border:2px solid;
border-radius:25px;
}
Related
I've needed to create a border with a linear gradient. I've found this solution and it works perfectly for me. However, I don't clearly understand how this works. If I haven't got any content, my background isn`t displayed, as well as if only one side(top/left/right/bottom) is set to a negative value. It appears only if all sides are set to a negative value. I would like to discover what rules lead to this.
<div></div>
div {
position: relative;
width: 200px;
height: 60px;
margin: 30px;
border-radius: 30px;
background: #fff;
text-align: center;
}
div::before {
content: "";
position: absolute;
top: -2px;
bottom: -2px;
left: -2px;
right: -2px;
background: linear-gradient(35deg, red, green);
border-radius: 34px;
z-index: -1;
}
I have to put "Play" icon and text "Play" in the center of element that contains and its height and width depend of that image - they are changing depending of the user's screen.
I was trying to use it like this
a.thumbnail:hover:after
{
content: "Play";
width: 50px;
height: 20px;
display: inline-block;
position: absolute;
top:50%;
left: 50%;
background-color: #fff;
border: 1px solid red;
}
But actually the top left corner of the :before element is in the middle and looks displaced... can you suggest me better solution?
add this to the code
margin: -10px -25px; /** height/2 width/2 **/
or use translate the same way
div{
position: relative;
width: 200px;
height: 200px;
background: red;
margin: 20px auto
}
div:after{
content: '';
position: absolute;
width: 50px;
height: 20px;
z-index: 2;
top: 50%;
left: 50%;
background: green;
transform: translate( -50%, -50%)
}
<div><div/>
I'm trying to give the background of a container a rounded arrow feel. I want the arrow to always be stretched to full width and able to adjust height on the fly (if necessary, I can adjust height with javascript).
Here's an example:
Is this possible using CSS?
If not, how should I accomplish it -- SVG background image?
You can use pseudo elements to achieve this shape.
FIDDLE
div {
width: 200px;
height: 100px;
overflow: hidden;
position: relative;
display: inline-block;
padding: 35px 100px;
}
div:before {
content: '';
width: 200px;
height: 200px;
background: #ccc;
border-radius: 20px;
position: absolute;
transform: rotate(-56deg) skewY(25deg);
}
div:after {
content: '';
width: 334px;
left: 33px;
top: 134px;
z-index: 1;
height: 40px;
background: #ccc;
position: absolute;
}
<div></div>
I'm struggling to achieve this effect -
Basically the line below needs to be fluid - I cant get my head around how to do this with a bottom border - any ideas?
Here you have a pure css solution: http://jsfiddle.net/u4Lkxfqe/
You can drag the left separation bar to the right to see it's responsive and gets smaller as you decrease the screen width.
As you see it's effect is very easy to achieve with the pseudo elements 'before' and 'after'.
.container {
position: relative;
width: 50%;
height: 300px;
border-bottom: 2px solid #CCC;
background: url("http://placehold.it/150x100") center center no-repeat;
}
.container:before{
z-index: 1;
position: absolute;
content: " ";
bottom: -6px;
left: -5px;
width: 10px;
height: 10px;
background: #CCC;
}
.container:after{
z-index: 1;
position: absolute;
content: " ";
bottom: -6px;
right: -5px;
width: 10px;
height: 10px;
background: #CCC;
}
<div class="container"></div>
I need to get a speech bubble that looks something like this via CSS:
I do not need to set default height for a box. It must have dynamic height. And if the height is increased, the left arrow must be in the center.
I looked through some examples, but I don't know how to change the height! Here is the code I have:
<style>
.bubble
{
position: relative;
width: 250px;
height: 120px;
padding: 0px;
background: gray;
margin-left:50px;
}
.bubble:after
{
content: "";
position: absolute;
top: 45px;
left: -15px;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent gray;
display: block;
width: 0;
z-index: 1;
}
</style>
<div class="bubble"></div>
Here is JSBin
Make
top: 40%;
bottom: 50%;
in your .bubble:after in CSS script
You have to check it by changing the .bubble height