Hee!
Currently I'm trying to make the following nav
but ending up getting the following
How can I lower the height of the arrow I'm adding at the bottom but keeping the full width?
nav {
position: relative;
display: inline-block;
height: 50px;
width: 100%;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
padding-bottom: 15%;
background-clip: content-box;
overflow: hidden;
}
nav:after {
content: "";
position: absolute;
top: 50px;
left: 0;
background-color: inherit;
padding-bottom: 50%;
width: 57.7%;
z-index: -1;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(-30deg) skewX(30deg);
-ms-transform: rotate(-30deg) skewX(30deg);
transform: rotate(-30deg) skewX(30deg);
}
<nav>nav</nav>
http://jsfiddle.net/v50wwuw6/
Using the border triangle technique with vw unit: http://jsfiddle.net/hamop5ca/
30px is the arrow height.
nav {
position: relative;
height: 50px;
width:100%;
background: gray;
}
nav:before {
content: "";
position: absolute;
top: 100%;
left: 0;
border-top: 30px solid red;
border-left: 50vw solid transparent;
border-right: 50vw solid transparent;
}
<nav>nav</nav>
Related
I am trying to make slanted box shadow on both sides of a div, which I have added here as an image.
The red part is indicating here shadow. actually color is not solid, it should gradually decrease when it is moving to outside from border.
Here is my contribution hope it gives you a baseline.
.box {
width: 150px;
height: 200px;
position: relative;
padding-left: 25px;
padding-right: 25px;
}
.box-content {
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
background-color: white;
border: 2px solid black;
width: 100%;
height: 100%;
position: relative;
}
.box::before {
content: '';
display: block;
border-top: 0;
border-bottom: 180px solid transparent;
border-right: 25px solid red;
position: absolute;
left: 0;
bottom: 0;
}
.box::after {
content: '';
display: block;
border-top: 0;
border-bottom: 180px solid transparent;
border-left: 25px solid red;
position: absolute;
right: -4px;
bottom: 0;
}
<div class="box">
<div class="box-content">
Box
</div>
</div>
Try this:
div{
width: 200px;
height: 200px;
border:1px solid black;
background: white;
}
div:before{
content:' ';
display:block;
width: 200px;
height:200px;
background: linear-gradient(transparent, black);
position: fixed;
transform: matrix3d(1.1,0,0.00,0,0.00,0.71,0.71,0.0007,0,-0.71,0.71,0,0,37,0,1); z-index: -1;
}
<div>Hello</div>
Using transform: skew() applied to the div's before and after
jsFiddle 1
code:
#test {
width: 150px;
height: 220px;
line-height: 220px;
background-color: white;
border: 2px black solid;
text-align: center;
position: relative;
margin: 10px 150px;
}
#test:before, #test:after {
width: 150px;
height: 200px;
position: absolute;
bottom: 0;
left: -11px;
z-index: -1;
content: " ";
display: block;
background-color: red;
transform: skew(5deg, 0);
}
#test:after {
transform: skew(-5deg, 0);
left: 11px;
}
<div id="test">Box</div>
EDIT : to give the shadow effect some real blur with gradient and transparency, we could make use of linear-gradient background with two rgba() values, as well as CSS blur() (1) filter.
jsFiddle 2
code:
#test {
width: 150px;
height: 220px;
line-height: 220px;
background-color: white;
border: 2px black solid;
text-align: center;
position: relative;
margin: 10px 150px;
}
#test:before, #test:after {
width: 150px;
height: 200px;
position: absolute;
bottom: 0;
left: -11px;
z-index: -1;
content: " ";
display: block;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
transform: skew(5deg, 0);
filter: blur(2px);
}
#test:after {
transform: skew(-5deg, 0);
left: 11px;
}
<div id="test">Box</div>
Notes:
(1) browser support for CSS filter
I want to recreate this icon using css pseudo elements (as a toggle indicator):
I have created the nececcary pseudo elements using ::after, ::before and tried to rotate them using transform: rotate(90deg).
How can I tell them to rotate around their own center? I have tried transform-origin: 50% 50%; which does not work. Right now, both pseudo elements got the same right: 10px; but they are not placed above each other, instead they are next to each other.
You can check this JS FIDDLE to illustrate the problem.
First you can use :before and :after pseudo elements and create shape like this DEMO
After that you can rotate parent element for 45deg and get desired result.
.el {
margin: 50px;
position: relative;
transform: rotate(45deg);
display: inline-block;
}
.el:before,
.el:after {
content: '';
width: 30px;
height: 30px;
position: absolute;
}
.el:before {
border-top: 4px solid black;
border-left: 4px solid black;
top: -10px;
left: -10px;
}
.el:after {
border-bottom: 4px solid black;
border-right: 4px solid black;
top: 10px;
left: 10px;
}
<div class="el"></div>
Update: You can also add some transition on :hover like this
.el {
margin: 50px;
position: relative;
transform: rotate(45deg);
display: inline-block;
cursor: pointer;
}
.el:before,
.el:after {
content: '';
width: 30px;
height: 30px;
position: absolute;
transition: all 0.3s ease-in;
}
.el:before {
border-top: 4px solid black;
border-left: 4px solid black;
top: -10px;
left: -10px;
}
.el:after {
border-bottom: 4px solid black;
border-right: 4px solid black;
top: 10px;
left: 10px;
}
.el:hover:before {
top: -15px;
left: -15px;
}
.el:hover:after {
top: 15px;
left: 15px;
}
<div class="el"></div>
transform-origin works fine, it's just that
a) 50% 50% (the object's center) is the default, and
b) you have to center the content of the box. That's a bit tricky because the icon you use doesn't require the full line height. Try adding
::before, ::after {
padding-bottom: .17em;
}
modify the style of #pseudo::after as right: 0;
#div {
background: blue;
width: 80px;
height: 80px;
transform: rotate(45deg);
}
/* tested but not working */
#pseudo::after,
#pseudo::before {
/* transform-origin: 50% 50%; */
}
#pseudo::after {
content: '›';
font-size: 50px;
color: green;
right: 0;
position: absolute;
transform: rotate(90deg);
top: 40px;
}
#pseudo::before {
content: '›';
font-size: 50px;
position: absolute;
color: green;
right: 10px;
top: 10px;
transform: rotate(-90deg);
}
<div id="div"></div>
<div id="pseudo"></div>
Here is a shadow that I am trying to replicate using just CSS and I just cannot work out how to do it. I have spent hours trying. I think I need to create 2 shadow elements but I'm not sure how to proceed.
The closest thing I get is with this (an abysmal attempt - I know):
.type-product:before, .type-product:after{
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 21px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 35px 20px #777;
transform: rotate(-8deg);
}
.type-product:after{
transform: rotate(8deg);
right: 20px;
left: auto;
}
Most appreciative if any CSS gurus could provide any help.
NOTE: I don't think that this link covers my problem fully. It just discusses the curve - whilst I need a curve with a color-gradient...
To me that looks like something that can be achieved using a couple of elements like shown below. The shadow is actually a linear-gradient on top of which a white circle is placed. The drawback of this approach is that it would work only with a solid background (because the circle that is overlayed would need a solid color).
That just doesn't look like it could be possible using a box-shadow because the shadow itself seems like a gradient which goes from transparent or white on the left to black in the middle to transparent or white again on the right.
The output is responsive and can adapt itself to all dimensions of the parent container. Just :hover the container in the snippet to see it in action :)
.wrapper {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
}
.content {
height: 85%;
width: 100%;
border: 1px solid;
}
.wrapper:before {
position: absolute;
content: '';
bottom: 0px;
left: 0px;
height: 15%;
width: 100%;
background: linear-gradient(to right, transparent 2%, #444, transparent 98%);
}
.wrapper:after {
position: absolute;
content: '';
bottom: -186%;
/* height of before - height of after - 1% buffer for the small gap */
left: -50%;
height: 200%;
width: 200%;
border-radius: 50%;
background: white;
}
* {
box-sizing: border-box;
}
/* just for demo */
.wrapper {
transition: all 1s;
}
.wrapper:hover {
height: 300px;
width: 400px;
}
<div class='wrapper'>
<div class='content'></div>
</div>
You can do this with :before pseudo element and box-shadow
div {
width: 200px;
height: 100px;
border: 1px solid #aaa;
position: relative;
background: white;
}
div:before {
content: '';
border-radius: 50%;
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
left: 0;
transform: translateY(103%);
box-shadow: 0px -54px 13px -47px #000000, -4px -45px 35px -28px #999999;
}
<div></div>
Aside from the answers, this could also be a good box shadow for your class as well. (This is just preference & similar to what you want).
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.type-product {
position: relative;
}
.type-product:before {
z-index: -1;
position: absolute;
content: "";
bottom: 17px;
left: 10px;
width: 50%;
top: 70%;
max-width: 300px;
background: #777;
box-shadow: 0 18px 20px #777;
transform: rotate(-8deg);
}
.type-product:after {
z-index: -1;
position: absolute;
content: "";
bottom: 17px;
right: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
box-shadow: 0 18px 20px #777;
transform: rotate(8deg);
}
<div class="type-product box">
</div>
Hope you like it.
I have two boxes one on top and one on left.
I'm using :after attribute to add line (border) after div.
First thing I want to do is to "join" both red borders.Right now there is empty gap between them, but if I change #toolbar::after left to '15px' I get that unwanted green line between red lines - can this be fixed?
Another thing is hovering over sidebar. After I move mouse cursor over sidebar it is moving to left:0, but border around toolbar isn't moving. Can I modify toolbar border after I hover over sidebar?
Below is sample code that illustrates my problem
html {
background: #e6e6e6;
}
#sidebar, #toolbar {
position: fixed;
top: 0;
left: 0;
}
#toolbar {
z-index: 102;
height: 50px;
right: 0;
text-shadow: 0 -1px 0 #000000;
background: #222222;
}
#sidebar {
z-index: 103;
bottom: 0;
width: 80px;
margin-top: 50px;
background: black;
left: -60px;
transition: all 0.2s ease;
transform: translateZ(0);
}
#sidebar:hover {
left: 0;
}
#sidebar::after {
content:'';
bottom: 0;
width: 4px;
position: absolute;
right: 0px;
top: 0;
display: block;
border-right: 1px solid green;
background: red;
-webkit-box-sizing: initial;
;
}
#toolbar::after {
content:'';
right: 0;
height: 4px;
position: absolute;
left: 20px;
bottom: 0;
display: block;
border-bottom: 1px solid green;
background: red;
-webkit-box-sizing: initial;
;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div id="toolbar"></div>
<div id="sidebar"></div>
You can use box-shadow instead of a border box-shadow: 5px 1px 0px 0px green;
Note :- I have changed the html structure for the pseudo element to move to left when hovered on sidebar
html {
background: #e6e6e6;
}
#sidebar,
#toolbar {
position: fixed;
top: 0;
left: 0;
}
#toolbar {
z-index: 102;
height: 50px;
right: 0;
text-shadow: 0 -1px 0 #000000;
background: #222222;
}
#sidebar {
z-index: 103;
bottom: 0;
width: 80px;
margin-top: 50px;
background: black;
left: -60px;
transition: all 0.2s ease;
transform: translateZ(0);
}
#sidebar:hover {
left: 0;
}
#sidebar::after {
content: '';
bottom: 0;
width: 4px;
position: absolute;
right: 0px;
top: 0;
display: block;
border-right: 1px solid green;
background: red;
-webkit-box-sizing: initial;
;
}
#toolbar::after {
content: '';
right: 0;
height: 4px;
position: absolute;
left: 15px;
bottom: 0;
display: block;
background: red;
-webkit-box-sizing: initial;
box-shadow: 5px 1px 0px 0px green;
transition: all 0.2s ease;
}
#sidebar:hover + #toolbar::after {
left: 75px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div id="sidebar"></div>
<div id="toolbar"></div>
I am new in CSS HTML. I am trying to following thing with CSS. I have a png icon. Now I want to partially fill-up it with color from bottom to top like the link of the image.
Are you trying to achieve something like this?
I inserted a div (represents the filling) into your pin and set the position property to absolute. Further I changed the position property of the parent div which represents the pin to relative, now you can align your filling absolute but within its parent.
body,
html {
height :100%;
}
body {
background: #2F2F2F;
}
.pin {
width:30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: black;
position: relative;
transform: rotate(-45deg);
left: 50%;
top: 50%;
margin: -20px 0 0 -20px;
}
.pin-fill {
width :10px;
height: 10px;
background: yellow;
position: absolute;
border-radius: 50% 50% 50% 0;
transform: rotate(1 deg);
left: 0;
bottom: 0;
}
<div class='pin'>
<div class="pin-fill"></div>
</div>
EDIT
If you want your inner pin (.pin-fill) look like a filling, I would suggest to change your it's border-radius as following.
border-radius: 0 100% 0 0;
Snippet
body,
html {
height :100%;
}
body {
background: #2F2F2F;
}
.pin {
width:30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: black;
position: relative;
transform: rotate(-45deg);
left: 50%;
top: 50%;
margin: -20px 0 0 -20px;
}
.pin-fill {
width :10px;
height: 10px;
background: yellow;
position: absolute;
border-radius: 0 100% 0 0;
transform: rotate(1 deg);
left: 0;
bottom: 0;
}
<div class='pin'>
<div class="pin-fill"></div>
</div>
Here is an example with plain filling
body,
html {
height: 100%;
}
body {
background: #2F2F2F;
}
.pin {
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: black;
position: relative;
transform: rotate(-45deg);
left: 50%;
top: 50%;
margin: -20px 0 0 -20px;
}
.pin-fill {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid yellow;
position: absolute;
left: -5px;
bottom: 0px;
transform: rotate(45deg);
}
<div class='pin'>
<div class="pin-fill"></div>
</div>