Is there a way to create a trapezoid shadow effect underneath a image such as the one in the image?
I only know create trapezoid with border. What i've came up with so far is this:
HTML
<div id="trapezoid"></div>
CSS
#trapezoid {
height: 0;
width: 120px;
border-bottom: 80px solid #05ed08;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
padding: 0 8px 0 0;
}
Thanks in advance.
I've created a jsFiddle that demonstrates a way to do it. In essence: give the image a shadow, overlay a transparent div on it that hides left, top and right border of the shadow. Because of these white borders this trick will not work if you use a complex background.
.wrapper {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
.wrapper img {
box-shadow: 0 0 50px black;
margin: 0px 30px 50px 30px;
}
.wrapper .overlay {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 100%;
height: 100%;
border-top: 0px solid white;
border-left: 30px solid white;
border-right: 30px solid white;
border-bottom: 50px solid transparent;
box-sizing: border-box;
}
<div class="wrapper">
<img src="http://i.stack.imgur.com/eg2RH.jpg" width="400" />
<div class="overlay"></div>
</div>
Related
I have the following div which aligns to the left side of the screen
css
#nav {
position: fixed;
height: 50px; width: 50px;
display: block;
background-color: #000;
}
This div contains an icon acting as a link
html
<div id="nav">icon</div>
I want the div to be a triangle (pointing towards the right) and not a square
I find this site useful: https://css-tricks.com/examples/ShapesOfCSS/
Right-facing triangle:
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
You can adjust the border properties to change the width, height, and color of the triangle.
Something like this is probably what you're looking for: https://jsfiddle.net/kh2xsoh2/1
HTML
<div id="nav"><span>icon</span></div>
CSS
#nav {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #000;
border-bottom: 25px solid transparent;
position: fixed;
}
#nav span {
position: absolute;
line-height: 0;
left: -45px;
color: white;
}
I'm basically trying to do a "CSS-triangle" (you know, an element where the entire shape is generated using borders) but instead of a triangle shape, I want a square with rounded corners on the left side and straight corners on the right side.
This works fine in Chrome but IE11 creates a weird artefact at the top-left corner. (a background-colored oval right where the rounded corner should be. really strange!)
Is there a way to create a workaround for IE11?
.RoundedElement {
width: 0;
height: 0;
border-top: none;
border-bottom: 50px solid transparent;
border-right: 20px solid #00a2d4;
position: relative;
right: 20px;
border-radius: 15px 0px 0px 15px;
border-color: #F7A824;
}
http://codepen.io/anon/pen/QbjaOG
I think you are over complicating the problem here.
Try the following:
body { margin: 50px; }
.RoundedElement {
width: 30px;
height: 50px;
position: relative;
right: 20px;
border-radius: 15px 0px 0px 15px;
background-color: #F7A824;
}
<div class="RoundedElement">
</div>
Why not use the regular background-color with border radius that works by default ?
If you still want to use border try the following:
body { margin: 50px; }
.RoundedElement {
width: 20px; //Added 20px to fix in FF.
height: 0px;
border-top:30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 40px solid #00a2d4;
position: relative;
border-radius: 15px 0px 0px 15px;
border-color: #F7A824;
}
<div class="RoundedElement">
</div>
tweaking the code to:
body { margin: 50px; }
.RoundedElement {
width: 10px;
height: 0;
border-top:30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 10px solid #00a2d4;
position: relative;
right: 20px;
border-radius: 15px 0px 0px 15px;
border-color: #F7A824;
z-index:2
}
pen
works in FF (should also in ie but not tested)
There is no need to do it like this. Use border-radius (support here). Also what you have is not a square, this is.
div {
width: 100px;
height: 100px;
border-radius: 50% 0px 0px 50%;
background: #000;
}
<div></div>
It not work because your div size is 0: width: 0; height: 0;
I am trying to create a css design like the image attached below. Actually I need to create this style only using CSS without using any images.
I tried get it to work but not sure How to create inner triangle.
This is my HTML -
body {
background: #cdc6e1;
}
.content-box {
background: #28166f;
width: 250px;
height: 100px;
}
.tag {
background: #f8c300;
width: 100px;
height: 0;
padding-left: 10%;
padding-bottom: 10%;
overflow: hidden;
}
.tag:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-bottom: 500px solid #f8c300;
}
<div class="content-box">
<div class="tag">
<h1>1<span>st</span></h1>
</div>
<div class="name">
<h1>First<br>
Place</h1>
</div>
</div>
Hope somebody may help me out to achieve to this custom style.
Thank you.
A basic mockup would be to use some pseudo elements in order to generate this:
.outer {
height: 200px;
width: 400px;
background: purple;
border: 10px solid pink;
position: relative;
text-Align: right;
font-size: 50px;
line-height: 200px;
}
.outer:before,
.outer:after {
height: 0;
width: 0;
position: absolute;
content: "";
border-bottom: 100px solid yellow;
border-right: 70px solid transparent;
border-left: 70px solid transparent;
bottom: 0;
left: 20px;
z-index: 8;
}
.outer:after {
border-bottom: 130px solid blue;
border-right: 90px solid transparent;
border-left: 90px solid transparent;
z-index: 0;
}
.place {
position: absolute;
left: 50px;
color: red;
bottom: -20px;
font-size: 100px;
line-height: initial;
z-index: 10;
text-shadow:
3px 3px 0 white,
/* Simulated effect for Firefox and Opera
and nice enhancement for WebKit */
-1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
}
<div class="outer">First Place
<div class="place">1st</div>
</div>
Note. The text outline property is yet to be implemented in any of the major browsers yet, so it may require a 'larger white text' to be positioned behind to create this text outline in your mockup.
A workaround (as stateed in the comments) would be to 'hack' the text shadow:
text-shadow:
3px 3px 0 white, /* Simulated effect for Firefox and Opera
and nice enhancement for WebKit */
-1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
Text Stroke
Although only available in webkit broswers, you may possibly want to use text-stroke for your 'white border' to the text (unavailable in IE or Firefox)
div {
font-size: 50px;
position: relative;
height: 50px;
width: 50px;
color: black;
}
div:before {
content: "1st";
z-index: -1;
left: 0;
top: 0;
position: absolute;
-webkit-text-fill-color: black;
-webkit-text-stroke: 8px red;
}
html {
background: gray;
}
<div>
1st
</div>
<br/>
<strong>Note</strong> only available in webkit browsers
Create a duplicate triangle and place it behind. Code given below. JSBin: http://jsbin.com/totewinizu/2/
HTML:
.tag {
width: 100px;
display: block;
position: relative;
top: 20px;
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 0px 60px 80px 60px;
height: 0px;
width: 0px;
z-index: 99;
}
.dupe {
position: absolute;
border-color: transparent transparent white transparent;
border-style: solid;
border-width: 0px 60px 80px 60px;
top: 40px;
left: 20px;
z-index: 9;
}
<div class="content-box">
<div class="tag">
<h1>1</h1><span>st</span>
</div>
<div class='tag dupe'>
</div>
<div class="name">
<h1>First<br>
Place</h1>
</div>
</div>
I am trying to create a downward-pointing arrow (.down) with CSS as a decorative element between the sections of a one-page site.
The problem is that the background-color of the .down-class is not spanning the whole width of the page:
This is my code:
HTML:
... </div>
<!-- About End-->
<div id="seperator"></div>
<div class="down"></div>
<!-- Portfolio -->
<div class="container-portfolio"> ... </div>
CSS:
#seperator {
background: #34495E;
height: 10px;
left: 0; right: 0;
}
.down {
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #34495E;
margin: 0 auto;
background: #16A085;
background-size: 100%;
}
I already tried to modify the background-size property of the .down-class, unfortunately without success. I would appreciate your advice on this. Thank you.
Try setting the background on the .down div and giving it 100% width, and then creating the 'arrow' as an :after pseudo-element.
#seperator {
background: #34495E;
height: 10px;
left: 0; right: 0;
}
.down {
width: 100%;
background: #16A085;
}
.down:after {
content: '';
display: block;
margin: 0 auto;
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #34495E;
}
Like this:
http://jsbin.com/APIyEbIp/1/edit
You might want to wrap another background class. Like this:
#seperator {
background: #34495E;
height: 10px;
left: 0; right: 0;
}
.down {
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #34495E;
margin: 0 auto;
}
.down_bkg {
background: #16A085;
background-size: 100%;
width:100%;
}
And HTML is like this:
<div id="seperator"></div>
<div class="down_bkg">
<div class="down"></div>
</div>
Try updating the down class CSS
width:100% or
min-width: 100%
Ok so, I'm trying to replicate the effect you see here at the bottom of the page, with the back to top button: http://www.ppp-templates.de/tilability/ - After the content area for We stay connected.
basically he's using a background image for that and I'd like to replicate it with CSS and keep the same effect.
I know how to create triangles with CSS with borders, but in my case I'd like to use the transparent bg image and not a color so I can't use borders
I removed the background image and used #FFF on the whole div, so it's all white now... I created a new div in which I added the back to top button and added background: transparent to it so it's transparent, but how do I create the triangle via CSS?
Any help is greatly appreciated.
The Fiddle:
http://jsfiddle.net/JaMH9/2/
The HTML:
<div class="bar">
<span class="home">^<br>Home, sweet home!</span>
</div>
The CSS:
.bar {
position: relative;
width: 90%;
height: 30px;
margin: 0 auto;
}
.home {
position: absolute;
top: 0px;
left: 60%;
width: 20%;
text-align: center;
}
.bar:before, .bar:after {
content:'';
position: absolute;
top: 0;
height: 0;
border-top: 30px solid white;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.bar:before {
left: 0;
width: 70%;
border-right: 30px solid transparent;
}
.bar:after {
right:0;
width: 30%;
border-left: 30px solid transparent;
}
Here's one way to make a triangle with fairly minimal markup and css:
HTML:
<div class="triangle"></div>
CSS:
.triangle {
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 35px solid gray;
}
http://jsbin.com/iribib/21
Here you go, http://jsfiddle.net/pkUx7/1/
HTML
<body>
<div id = "footer"></div>
<div id = "bottom-line-left"></div>
<div id = "triangle"></div>
<div id = "bottom-line-right"></div>
</body>
CSS
body {
background-color: purple;
}
div {
margin:0;
padding:0;
background-color: violet;
}
#footer {
height: 100px;
}
#bottom-line-left, #bottom-line-right {
display: inline-block;
height: 20px;
}
#bottom-line-left {
width: 61%;
}
#bottom-line-right {
float: right;
width: 37%;
}
#triangle {
margin-left:-6px;
margin-right: -4px;
padding:0;
display: inline-block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid purple;
}
I just threw this together, there's probably a better way to achieve this effect.
HTML
<div class="div1">Lorem Ipsum</div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
CSS
body {
background-color: gray;
border: 20px solid gray;
}
.div1 {
background-color: white;
border: 20px solid white;
}
.div2 {
float: right;
border-top: 20px solid white;
border-right: 20px solid white;
border-left: 20px solid transparent;
}
.div3 {
float: right;
margin: 10px -20px;
border-bottom: 20px solid white;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}
.div4 {
border-top: 20px solid white;
border-right: 20px solid transparent;
margin-right: 40px;
}
See it here.
You can use vector path.
For instance, transparent triangle with green border:
<svg height="151" width="150">
<path d="m0 150 h150 l -75 -150 z" fill="transparent" stroke="green" />
</svg>
See it here.