I'm wondering how to achieve this kind of css active style link shape I designed, should i create a specific shape for the left rounded part or should I just use border-left and try to tweak it ?
you can use ::after css pseudo element for this. Here is example fiddle. Hope this helps you.
.link {
height: 100px;
width: 100px;
background: red;
position: relative;
overflow: hidden;
}
.link::after{
content: "";
height: 80%;
background: #fff;
width: 20px;
position: absolute;
top: 10%;
left: -10px;
border-radius: 20px;
transition: all .35s;
opacity: 0;
}
.link:hover::after{opacity:1}
<div class="link"></div>
Check this link. You can lean more about CSS Pseudo-elements from there.
try using border radius like this
div {
width: 10px;
height:40px;
background-color: black;
border-top-right-radius: 6px;
border-bottom-right-radius:6px;
}
<div></div>
Related
I want to make a fancy button (The button Example image is attached below), I actually Saw this button on a website
I am a beginner to CSS, I have very less idea about it but still I want to know how we can make buttons like this, along with it's hover effect, Please help me out...
The image of the button :-
enter image description here
You can check the button snippet below created using pseudo class.
I used position: absolute to arrange the border. You can align it anywhere using the top and left properties.
button {
border: 0;
outline: none;
padding: 10px 20px;
background-color: #335dff;
color: #fff;
cursor: pointer;
position: relative;
}
button::after {
content: '';
display: inline-block;
width: 100%;
border: 1px solid #335dff;
position: absolute;
height: 35px;
left: -5px;
top: 5px;
border-radius: 2px;
}
section {
background-color: #000;
height: 300px;
padding: 30px;
}
<section>
<button>Click</button>
</section>
Looking at the code they use as #MMD suggests you can see that there are two main things in use.
Each link has a before pseudo element with a left and bottom border positioned absolutely relative to the a element and the border color is picked up from a CSS variable --bg.
To get the hover effect note that on hover the button tranlates down and left while the amount the pseudo element is offset from the button reduces to zero.
<style>
body {
background: black;
width: 100vw;
height: 100vh;
}
.link {
width: 20vmin;
height: 10vmin;
padding: 2vmin;
background-color: var(--bg);
position: relative;
display: inline-block;
margin: 2vmin;
transform: translate(0, 0);
transition: transform 0.3s linear;
}
.link::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 1vmin;
left: -1vmin;
border: solid var(--bg) 1px;
display: inline-block;
}
.link:hover {
transform: translate(-1vmin, 1vmin);
}
.link:hover::before {
top: 0;
left: 0;
}
.link1 {
--bg: white;
}
.link2 {
--bg: cyan;
}
</style>
<body>
<a class="link link1">Link1</a>
<a class="link link2">Link2</a>
</body>
I have a regular <div> element currently styled to look like a plain rectangle with rounded edges like this:
Is there a way to style it with just CSS (without adding any additional html elements to it) to make it look like this with a 'brace' on each end of the bar:
Here's a small cut out from my code of what I have at the moment:
.rectangle {
width: 400px;
background-color: grey;
border-radius: 4px;
}
<div class='rectangle'> </div>
You might use border:
.brace {
width: 400px; height:20px;
background-color: grey;
border:solid 10px;
border-color: #0000 #0000 #fff;
border-radius: 4px;
}
<div class="brace"></div>
You'd have to play around a bit with the settings below to get the precise size/shape you need, but you can do it by using a pseudo element, similar to the snippet below.
The :after rule creates an additional element which overlaps the main element.
.rectangle {
position: relative;
width: 400px;
background-color: grey;
height: 40px;
border-radius: 4px;
}
.rectangle:after {
content: '';
display: block;
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
width: 380px;
height: 10px;
background-color: white;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
<div class='rectangle'> </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>
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;
}
Is there any way I could draw a trapezium span thing with text in it? Doesn't matter if the corners are rounded, in fact, I'd prefer it if they were. I know how to make an oval/circle with border-radius, but I'm stuck on the trapezium. Help please!
I did it pure css using pseudo-elements and skew css property with support border-radius: demo on dabblet.com
http://img135.imageshack.us/img135/9683/eedea21cb3bc438fb33c80c.png
html: <span>Trapezium</span>
css:
span {
display: block;
z-index: 1;
position: relative;
/* custom sizes */
width: 200px;
height: 50px;
}
span:before,
span:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: -1;
}
span:before {
transform: skew(25deg);
left: 25px;
}
span:after {
transform: skew(-25deg);
right: 25px;
left: auto;
}
UPD: demo without pseudo-elements
Use this css code
span {display:block;
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
I did it once, think it was something like this:
http://jsbin.com/ebejip/