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;
}
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 have a div with a simple border:
border: 10px solid #642850;
div {
border: 10px solid #642850;
height: 100px;
width: 100px;
}
<div></div>
I'm looking to create a shape like this:
What is the best way to achieve this?
try this one :
http://jsfiddle.net/sachinkk/L5zz1hak/2/
.sq {
border: 10px solid #642850;
height: 100px;
width: 100px;
position: relative;
margin-top: 100px;
}
.tl {
position: absolute;
top: -33px;
left: -36px;
border-left: 10px solid #642850;
border-top: 10px solid #642850;
height: 76px;
width: 76px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform-origin: 100% 100%;
}
<div class="sq">
<div class="tl"></div>
</div>
CSS
By using a pseudo-element and using css transforms, the desired shape can be accomplished.
div {
background: white;
border: 10px solid #642850;
width: 100px;
height: 100px;
margin-top: 75px;
positioN: relative;
}
div::before {
margin-top: -52px;
border: 10px solid #642850;
background: white;
content: '';
transform: rotate(45deg);
position: absolute;
top: 0;
left: 8px;
height: 64px;
width: 64px;
z-index: -2;
}
<div></div>
SVG
An alternative could be to use SVG to generate the shape you want. SVG's are responsive and well supported across browsers.
<svg width="50%" viewbox="0 0 100 100">
<polygon points="2,25 2,98 98,98 98,25 50,2z" fill="white" stroke-width="2" stroke="#642850"></polygon>
<polyline points="2,25 98,25" stroke="#642850" stroke-width="2"></polyline>
</svg>
Try this
.b{
width:200px;
height:100px;
overflow:hidden;
}
.b div{
width:200px;
height:200px;
transform:rotate(45deg);
content:"";
border:10px solid red;
margin-top:40px;
margin-left:-10px;
}
.a{
width:180px;
height:200px;
border:10px solid red;
margin-top:0px;
}
<div class="b"><div></div></div>
<div class="a"></div>
With one div and using generated content:
div {width:100px; height:100px; border:5px solid red; position:relative; margin-top:50px}
div:after,div:before {content:""; position:absolute; border:55px solid red; border-color:transparent transparent red transparent; border-width:40px 55px; bottom:105px; left:-5px}
div:after {border-color:transparent transparent white transparent; border-width:34px 48px; left:2px}
<div></div>
Try this solution:
.roof {
position: absolute;
top: calc(499px - 48px);
left: 899px;
height: 0;
width: 0;
border-left: 120px solid #f00;
border-top: 120px solid transparent;
transform: rotate(135deg);
}
.roofCovering {
position: absolute;
top: calc(499px - 48px + 5px);
left: 909px;
height: 0;
width: 0;
border-left: 100px solid #fff;
border-top: 100px solid transparent;
transform: rotate(135deg);
}
.house {
position: absolute;
top: calc(499px - 48px + 58px);
left: 874px;
height: 165px;
width: 160px;
border: 5px solid #f00;
}
<div class="roof"></div>
<div class="roofCovering"></div>
<div class="house"></div>
This is the shape I want. Can it be done with CSS?
I have created a circle. Here :
(source: pngimg.com)
<div class="lemon"></div>
CSS :-
.lemon {
width: 200px;
height: 200px;
background-color: #FFFA40;
border: 4px solid #FFF150;
border-radius: 100px;
top:20px;
}
lemon and leaves
body {
background: rgb(48, 52, 52)
}
.container {
margin: 0 auto;
width: 200px;
position: relative;
}
.leaves {
width: 7px;
height: 70px;
background: #339B00;
border-radius: 0 0 10px 10px;
position: absolute;
left: 50%;
margin-left: -4px;
z-index: 1;
}
.leaves:after {
content: '';
width: 80px;
height: 80px;
background: #339B00;
position: absolute;
border-radius: 0% 50%;
transform: rotate(96deg) skew(21deg, 11deg);
transform-origin: left top;
top: 32px;
}
.leaves:before {
content: '';
width: 70px;
left: 8px;
height: 70px;
background: #339B00;
position: absolute;
border-radius: 0% 50%;
transform: rotate(-16deg) skew(21deg, 11deg);
transform-origin: left top;
top: 32px;
}
.lemon {
width: 160px;
height: 160px;
border-radius: 50%;
background: yellow;
position: absolute;
transform: rotate(48deg) skew(6deg, 6deg);
top: 69px;
left: 50%;
margin-left: -80px;
}
.lemon:after {
content: '';
width: 50px;
height: 50px;
background: yellow;
top: 64%;
left: 50%;
position: absolute;
margin-left: 24px;
border-radius: 19px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
<div class="leaves"></div>
<div class="lemon"></div>
</div>
You should use different border radii for different corners. Also, add transform: rotate(45deg); to rotate it by 45deg.
.lemon {
width: 200px;
height: 200px;
background-color: #FFFA40;
border: 4px solid #FFF150;
border-radius: 20px 140px 40px 140px; /* top right bottom left */
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
position:relative;
top:30px;
}
<div class="lemon"></div>
Bonus
A lemon with twig and leaf.
body {
background-color:#333;
}
.lemon {
width: 200px;
height: 200px;
background-color: #FFFA40;
border: 4px solid #FFF150;
border-radius: 20px 140px 40px 140px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
position:relative;
top:145px;
z-index:1;
}
.leaf {
width: 100px;
height: 100px;
background: #11AA11;
border-radius: 5px 100px;
transform:rotate(105deg);
-webkit-transform:rotate(105deg);
-moz-transform:rotate(105deg);
position:relative;
top:-200px;
left:110px;
z-index:3;
}
.twig{
width: 7px;
height: 0px;
border-bottom: 90px solid #A0522D;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
border-bottom-right-radius:4px;
border-bottom-left-radius:4px;
transform:rotate(-10deg);
position:relative;
top:-284px;
left:88px;
z-index:2;
}
<div class="lemon"></div>
<div class="leaf"></div>
<div class="twig"></div>
This is pretty trivial with a pseudo-element for the bottom edge:
.lemon {
background:yellow;
width:200px;
height:150px;
border-radius:50%;
position:relative;
}
.lemon:after {
content:'';
position:absolute;
left:85%;
top:40%;
background:yellow;
width:25%;
height:20%;
border-radius:50%;
}
Sample fiddle here. Obviously you can rotate it to any position you want, ie. transform:rotate(90deg).
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>