I have this CSS triangle:
http://codepen.io/orweinberger/pen/myEoVa
CODE:
*,
*:before,
*:after {
box-sizing: border-box;
}
.triangle {
position:absolute;
bottom:0;
right:0;
display: inline-block;
vertical-align: middle;
}
.triangle-0 {
width: 200px;
height: 200px;
border-bottom: solid 100px rgb(85,85,85);
border-right: solid 100px rgb(85,85,85);
border-left: solid 100px transparent;
border-top: solid 100px transparent;
}
.text {
color:#fff;
position:absolute;
bottom:0;
right:0;
}
Is it possible to add a shadow to one of the edges, similar to this?
http://codepen.io/orweinberger/pen/ByzbKX
You can use another approach for the triangle to be able to apply a box-shadow to it :
body {
overflow: hidden;
}
div {
position: absolute;
bottom: 0;
right: 0;
height: 150px;
width: 213px;
background: lightgrey;
-webkit-transform-origin:100% 0;
-ms-transform-origin:100% 0;
transform-origin: 100% 0;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
box-shadow: 0px -3px 5px 0px #656565;
}
<div></div>
More info here on triangles with transform rotate
It can be done by combining CSS transform and box-shadow. However I think skewX transform notation is more capable in this case.
Example Here - (vendor prefixes omitted due to brevity).
.triangle {
position:absolute;
bottom:0; right:0;
width: 200px;
height: 200px;
overflow: hidden;
}
.triangle::before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: rgb(85,85,85);
box-shadow: 0 0 7px rgba(0,0,0,.8);
transform: skewX(-45deg);
transform-origin: 0 100%;
}
.text {
color:#fff;
position: absolute;
bottom: 0; right: 0;
}
<div class="triangle"></div>
<div class="text">
Lorem ipsum...
</div>
if you just want out your shadow in bottom right corner
there have a solution,
*{margin:0px; padding:0px;}
.corner{
width:150px;
height:150px;
overflow: hidden;
position: absolute;
right:0px; bottom:0px;
}
.corner:before{
background:rgb(85,85,85);
width:220px;
height:220px;
transform: rotate(45deg);
margin: 48px;
box-shadow: 0px 0px 10px #111;
bottom: 0px;
right: 0px;
content:'';
display: block;
}
.text{position: absolute;
z-index: 2;
right: 10px;
bottom: 10px;
color: #fff;}
<div class="corner">
<div class="text">
Tesdt
</div>
</div>
Related
I'm having difficulty adding a box shadow around the outline of the arrow that was generated using border properties. Is there a way to make the box shadow in the shape the same as the arrow instead of a square box?
Here's a jsfiddle.
HTML:
<a class="bx-prev"></a>
<a class="bx-next"></a>
CSS:
.bx-prev, .bx-next {
border-right: 15px solid green;
border-bottom: 15px solid green;
width: 35px;
height: 35px;
top: 200px;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}
.bx-prev {
transform: rotate(135deg);
position: absolute;
left: 220px;
}
.bx-next {
transform: rotate(-45deg);
position: absolute;
left: 320px;
}
Try this.
Edit!
.bx-prev, .bx-next {
border-right: 15px solid green;
border-bottom: 15px solid green;
width: 35px;
height: 35px;
top: 200px;
-webkit-filter: drop-shadow(0px 0px 2px rgba(0,0,0,.7));
filter: drop-shadow(0px 0px 2px rgba(0,0,0,.7));
}
.bx-prev {
transform: rotate(135deg);
position: absolute;
left: 220px;
}
.bx-next {
transform: rotate(-45deg);
position: absolute;
left: 320px;
}
<a class="bx-prev"></a>
<a class="bx-next"></a>
You can try the blur filter by creating the same arrow with a pseudo element:
.bx-prev,
.bx-next {
top: 200px;
position:relative;
}
.bx-prev {
transform: rotate(135deg);
position: absolute;
left: 220px;
}
.bx-next {
transform: rotate(-45deg);
position: absolute;
left: 320px;
}
/*the arrow*/
.bx-prev:before,
.bx-next:before,
.bx-prev:after,
.bx-next:after{
content:"";
position:absolute;
border-right: 15px solid green;
border-bottom: 15px solid green;
width: 35px;
height: 35px;
}
/*the shadow*/
.bx-prev:after,
.bx-next:after{
border-color: red;
z-index:-1;
filter:blur(5px);
}
<a class="bx-prev"></a>
<a class="bx-next"></a>
I need to add borders to this "shape". It's kinda difficult because the shape is made with the after and before pseudo-elements. I can't find the right way.
What I need to achieve:
The code I have so far:
https://jsfiddle.net/jimmyadaro/xfcjfz3d/
#octagon {
width: 300px;
height: 200px;
background: red;
position: relative;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
display: block;
}
#octagon:before,
#octagon:after {
content: "";
position: absolute;
left: 0;
right: 0;
}
#octagon:before {
top: 0;
border-bottom: 30px solid red;
border-left: 30px solid #fff;
border-right: 30px solid #fff;
}
#octagon:after {
bottom: 0;
border-top: 30px solid red;
border-left: 30px solid #fff;
border-right: 30px solid #fff;
}
<div id="octagon"></div>
I tried with shadows and outlines without success.
Thanks for reading.
Note: I'll use a solid background color, if that matters.
Here's my solution. No solid background color is required. This may or may not suit your actual use case.
JSFiddle
#octagon {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
#octagon:before,
#octagon:after {
content: "";
display: block;
width: 300px;
padding-top: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
z-index: -1;
}
#octagon:before {
background: red;
}
#octagon:after {
background:
linear-gradient(
45deg,
#0e0 calc(50% - 150px + 10px), transparent 0,
transparent calc(50% + 150px - 10px), #0e0 0%),
linear-gradient(
-45deg,
#0e0 calc(50% - 100px + 10px), transparent 0,
transparent calc(50% + 100px - 10px), #0e0 0);
box-shadow: 0 0 0 10px #0e0 inset;
}
<div id="octagon">Hello World!</div>
Well, this is the only way I could think of approaching it in pure CSS:
JSfiddle here: https://jsfiddle.net/xfcjfz3d/7/
body {
background:#fff;
}
#octagon {
position:relative;
width: 300px;
height: 200px;
background: green;
position: relative;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
display: block;
}
#octagon:before,
#octagon:after {
content: "";
position: absolute;
left: 0;
right: 0;
}
#octagon:before {
top: 0;
border-bottom: 30px solid green;
border-left: 30px solid #fff;
border-right: 30px solid #fff;
}
#octagon:after {
bottom: 0;
border-top: 30px solid green;
border-left: 30px solid #fff;
border-right: 30px solid #fff;
}
.tall {
position:absolute;
background:red;
width:230px;
height:190px;
left:35px;
top:5px;
z-index:1;
}
.wide {
position:absolute;
background:red;
width:290px;
height:130px;
left:5px;
top:35px;
z-index:1;
}
.corner {
position:absolute;
background:red;
width:45px;
height:43px;
z-index:1;
transform: rotate(45deg);
}
.topleft {
left:14px;
top:14px;
}
.topright {
//background:black;
left:241px;
top:13px;
}
.bottomleft {
background:red;
left:13px;
top:143px;
}
.bottomright {
background:red;
left:241px;
top:143px;
}
<div id="octagon">
<div class="tall"></div>
<div class="wide"></div>
<div class="corner topleft"></div>
<div class="corner topright"></div>
<div class="corner bottomleft"></div>
<div class="corner bottomright"></div>
</div>
I am trying to create a lifted corner, 3d box effect on the bottom and top of a div. I am able to create the desired effect on bottom of the div, but cannot figure out how to mimic the effect on the top. Does anyone know how to achieve this on both the bottom and top of a div?
Here is a JSFiddle: https://jsfiddle.net/rnejan81/
body {
background-color: #e2e2e2;
}
.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 15px 10px #777;
transform: rotate(-3deg);
}
.effect2:after
{
transform: rotate(3deg);
right: 10px;
left: auto;
}
<div class="box effect2 effect3">
<h3>Effect 2</h3>
</div>
I just wrapped your box with another div and got the desired output
EDIT: Demo had some alignment issue before, thanks for #zaqx for pointing out that. this is the updated fiddle.
Here is the fiddle
body {
background-color: #e2e2e2;
}
.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
/*==================================================
* Effect 2
* ===============================================*/
.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 15px 10px #777;
transform: rotate(-3deg);
}
.effect2:after
{
transform: rotate(3deg);
right: 10px;
left: auto;
}
.effect-wrapper {
position: relative;
}
.effect-wrapper:before, .effect-wrapper:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 16%;
width: 52%;
top: 8%;
height: 5px;
max-width: 300px;
background: #777;
box-shadow: 0 15px 10px #777;
transform: rotate(183deg);
}
.effect-wrapper:after {
transform: rotate(177deg);
right: 16%;
left: auto;
}
<div class="effect-wrapper">
<div class="box effect2 effect3">
<h3>Effect 2</h3>
</div>
</div>
Hi ,
I need create div which would look like one on the provided image. Notice black and grey zones. I have been experimenting with css 3 but i was able to create only differently rotated trapezoid. Is it possible to create this only with css ?
EDIT: What ive tried was this
trapezoid {
border-bottom: 100px solid red;
border-left: 150px solid transparent;
border-right: 0px solid transparent;
height: 0;
}
It produces trapezoid which is nice but its differnetly rotated and i cant figure out how to rotate it
You could use a skew'ed pseudo element for this. Something like:
div {
height: 100px;
background: tomato;
padding-top: 10px;
position: relative;
overflow: hidden;
}
div:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150%;
background: gray;
-webkit-transform-origin: top left;
-webkit-transform: skewY(2deg);
-moz-transform-origin: top left;
-moz-transform: skewY(2deg);
transform-origin: top left;
transform: skewY(2deg);
}
<div></div>
Another Approach would be:
div{
height:100px;
width:90vw;
margin:0;padding:0;
padding-top:10px;
background:gray;position:relative;
}
div:before{
content:"";
position:absolute;
top:0;
left:0;
border-left:90vw solid transparent;
border-top:10px solid red;
-webkit-transform:translateZ(0);
transform:translateZ(0);
}
<div></div>
You have to take a dummy div to make it behave as want that to rotate and make the tail visible
#black {
background-color: black;
position: absolute;
-ms-transform: rotate(1deg);
/* IE 9 */
-webkit-transform: rotate(1deg);
/* Safari */
transform: rotate(1deg);
top: -95px;
}
#grey {
background-color: grey;
position: absolute;
top: 0px;
}
div {
width: 100%;
height: 100px
}
<div id="grey"></div>
<div id="black"></div>
This is what your expected output:
.main {
background: none repeat scroll 0 0 grey;
height: 80px;
overflow: hidden;
position: relative;
width: 380px;
}
.inner {
background: none repeat scroll 0 0 red;
height: 80px;
left: 400px;
margin: 0 auto;
top: 80px;
width: 150px;
z-index: 99999;
}
.inner::before {
border-bottom: 0 solid transparent;
border-right: 100px solid red;
border-top: 83px solid transparent;
bottom: 0;
content: "";
height: 66px;
left: 15px;
position: absolute;
right: 100%;
top: 0;
width: 0;
}
<div class="main">
<div class="inner"></div></div>
Hope it helps.
Any idea how Facebook does this? I'm trying to use it on backgrounds that aren't solid so trying to cover parts of the image using the CSS Triangles aren't going to work. I figured I could try using border-image but I'm not getting anywhere. Any ideas?
Try this jsfiddle solution ;)
UPDATE for firefox:
http://jsfiddle.net/FSwx2/1/
HTML:
<div class="container">
<div class="main-image">
<div class="image-properties">
<img class="image-fix" src="http://www.fujifilm.com/products/digital_cameras/xp/finepix_xp100/features/img/index/pic_02.jpg"/>
</div>
</div>
<div class="triangle-image">
<div class="deg-fix">
<img class="image-fix" src="http://www.fujifilm.com/products/digital_cameras/xp/finepix_xp100/features/img/index/pic_02.jpg"/>
</div>
</div>
</div>
CSS:
.container {
height: 137px;
left: 0;
position: relative;
top: 20px;
width: 370px;
}
.main-image {
height: 137px;
overflow: hidden;
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.25);
}
.image-properties {
height: 159px;
position: relative;
top: -11px;
width: 370px;
overflow: hidden;
}
.triangle-image {
border-left: 1px solid rgba(0, 0, 0, 0.25);
border-top: 1px solid rgba(0, 0, 0, 0.25);
display: block;
height: 15px;
overflow: hidden;
position: absolute;
top: 0;
width: 15px;
-webkit-transform: translate(24px, -12px) rotate(45deg);
-webkit-transform-origin: 0 0;
}
.deg-fix {
width: 370px;
height: 159px;
-webkit-transform: rotate(-45deg) translate(-24px, 0px);
-webkit-transform-origin: 0 0;
top:0;
}
.image-fix {
left:-31px;
top:0px;
width:432px;
height:160px;
}
you can achieve this effect using :after or :before pseudo selector. Here is a Demo. and updated Demo
div{
width:200px;
height:100px;
background:gray;
position:relative;
top:20px;
}
div:after
{
content: "";
position:absolute;
top:-15px;
left:0;
width:0px;
height:0px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid gray;
}