How can i add smooth triangle bottom of div - html

i have a box and i need to put smooth triangle bottom of the div but i couldn't achieve as i want how can i do this like below image ?
.slide-box {
position: relative;
display: inline-block;
background: #e41113;
border: 1px solid #df2b2c;
border-radius: 6px;
}
.slide-box a {
display: block;
color: #fff;
text-decoration: none;
padding: 12px 10px;
}
.slide-box:after {
content: '';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 25px solid #df2b2c;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
<div class="slide-box">
<a href="#">
I'm a super <br>box!
</a>
</div>

I'm not sure that you'll be able to complete what you want with ::after.
But probably you can use transition rotate and scale on absolute positioned element in the bottom.
Here's the concept:
.slide-box {
position: relative;
display: inline-block;
background: #e41113;
border: 1px solid #df2b2c;
border-radius: 6px;
width: 145px;
height: 70px;
}
.slide-box a {
display: block;
color: #fff;
background: #e41113;
display: block;
text-decoration: none;
padding: 12px 10px;
z-index:1000;
}
.slide-box .corner {
position: absolute;
top: 70px;
left: 0px;
width: 103px;
height: 103px;
background-color: #e41113;
transform-origin: top left;
transform: scale(1, 0.25) rotate(-45deg);
border-radius: 6px;
}
<div class="slide-box">
<a href="#">
I'm a super <br>box!
</a>
<div class="corner"></div>
</div>
Of course the main task will be positioning.
So there you need 2 prerequisitions:
With "transform-origin: top left;" you need to keep top of the .corner == height of your main container (don't know why, but bottom:0 not works, maybe youll resolve
this)
The .corner should be square (width=height), and to keep it smooth you need to maintain ratio width(.corner) = width(.slide-box)*sqrt(2). Means width of your corner`s diagonal should be equal to width of main container.

Here is a way to do:
.container {
width: 300px;
}
.slide-box {
height: 200px;
width: 100%;
position: relative;
background-color: #df2b2c;
text-align: left;
margin-left: 70px;
margin-bottom: -75px;
border-radius: 0 0 25% 25%;
}
.slide-box a {
display: block;
color: #fff;
text-decoration: none;
padding: 12px 10px;
}
.corner {
position: relative;
background-color: #df2b2c;
text-align: left;
margin-left: 95px;
}
.corner:before,
.corner:after {
content: '';
position: absolute;
background-color: inherit;
}
.corner,
.corner:before,
.corner:after {
width: 165px;
height: 165px;
border-top-right-radius: 30%;
}
.corner {
transform: rotate(-120deg) skewX(-30deg) scale(1,.866);
}
.corner:before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.corner:after {
transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
<div class="container">
<div class="slide-box">
<a href="#">
I'm a super <br>box!
</a>
</div>
<div class="corner"></div>
</div>

Related

Is there a simple way to make a custom border shape for an HTML <div>?

I am building a webpage with cards arranged in a grid.
However, I would like my cards to have a unique shape, rather than just being rectangles. The shape I would like them to be is the shape of a manilla folder (pictured below)
Is there any relatively simply way to make a div with this shape?
Here is a start using only html and css:
body {
padding: 50px;
}
div {
position: relative;
z-index: 1;
white-space: nowrap;
}
div .slant {
position: relative;
display: inline-block;
color: inherit;
text-decoration: none;
margin: 0 -14px -4px;
width: 40px;
}
div .slant::before,
main {
border: 0.2em solid #000;
background: #000;
}
div .slant::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0.5em;
left: 0;
z-index: -1;
border-bottom: none;
border-radius: 5px 5px 0 0;
background: #000;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom;
}
div.left .slant {
padding: 1.5em 2em 1em 1em;
}
div.left .slant::before {
transform-origin: bottom left;
}
main {
display: block;
margin: -8px 0 30px -14px;
padding: 1em;
border-radius: 0 5px 5px 5px;
width: 200px;
height: 300px;
}
<div class="left">
<div class="slant"></div>
</div>
<main>
</main>
It took me about 10 minutes just to do that, so if you have the motivation to improve it, feel free to do so. It is possible to do it with divs and positioning with CSS. It's just a matter of playing with z-index and shapes, but unless you just wan't to impress yourself for achieving it, the easiest way is to create a background image and move your html content over it.
I am not the best front-end programmer either so don't be arshe! I'm sure someone else could improve it even better with outline borders and stuff.
div#panel {
position: absolute;
border: 3px solid black;
border-radius: 10px;
width: 200px;
height: 200px;
background-color: white;
top: 50%;
left: 50%;
z-index: 3;
transform: translate(-50%, -50%);
}
div#box {
position: absolute;
border: 3px solid red;
z-index: 0;
border-radius: 10px;
width: 200px;
height: 200px;
top: 48.5%;
left: 50%;
z-index: ;
transform: translate(-50%, -50%);
}
div#box2 {
position: absolute;
border: 3px solid red;
border-radius: 10px;
width: 80px;
height: 200px;
background-color: white;
top: 47%;
left: 46.9%;
z-index: 1;
transform: translate(-50%, -50%);
}
<div id="panel"></div>
<div id="box">
<p style="padding-left: 5px;"> Some text here</p>
</div>
<div id="box2"></div>
You can use this shape as the background-image of the card. Remove the card default property like background-color, box-shadow...
HTML:
<div class="main-class">
<div class="card">
.....
</div>
</div>
CSS:
.main-class .card{
background-image: url("path");
background-repeat: no-repeat;
background-size: cover;
background-color: transparent;
box-shadow: none;
}

CSS: A similar effect to placing an element's box shadow at a different z-index than the element

I have a container which holds an image and a panel the appears when you hover over that image. I am trying to get the box shadow on the panel to appear behind the image, while the rest of the panel overlaps the image.
What I have vs. What I'd like to have
HTML:
<div class="container">
<img class="icon" src="http://placehold.it/350x350" />
<div class="sum-container left">
<img src="http://placehold.it/350x150" />
</div>
</div>
CSS:
.container .sum-container {
position: absolute;
top: 0;
bottom: 0;
border: solid 5px blue;
background-color: white;
width: 250px;
height: 200px;
max-height: 100%;
opacity: 0;
overflow: hidden;
z-index: 5;
pointer-events: none;
transition-property: opacity;
transition-duration: .250s;
}
.container .sum-container.left {
right: 100%;
margin-right: -5px;
border-right: none;
padding-right: 0px;
box-shadow: 5px 5px 0px #888888;
}
.container .icon:hover + .sum-container {
z-index: 6;
opacity: 1;
}
.container {
position: absolute;
left: 300px;
top: 20px;
}
.container img {
width: 100%;
}
.icon {
margin-left: auto;
margin-right: auto;
display: block;
width: 100%;
height: auto;
max-width: 480px;
background-color: blue;
box-shadow: 5px 5px 0px #888888;
text-align: center;
font-size: 26px;
color: white;
text-decoration: none;
padding: 5px;
cursor: pointer;
border: none;
outline: none;
user-drag: none;
}
I've included a JSFiddle as well.
Also, still new here. If anyone can suggest a better title, please let me know. I realize you can't actually set multiple z-indexes for one element, but I'm looking for a solution with a similar effect.
If I understand the end goal, you can make the shadow a pseudo element with a negative z-index and remove the z-index from .sum-container and .sum-container will be over .icon and it's pseudo element will be under both of them.
.container .sum-container {
position: absolute;
top: 0;
bottom: 0;
border: solid 5px blue;
background-color: white;
width: 250px;
height: 200px;
max-height: 100%;
opacity: 1;
pointer-events: none;
transition-property: opacity;
transition-duration: .250s;
}
.sum-container:after {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
content: '';
background: #888;
transform: translate(0,10px);
z-index: -1;
}
.container .sum-container.left {
right: 100%;
margin-right: -5px;
border-right: none;
padding-right: 0px;
}
.container .icon:hover + .sum-container {
opacity: 1;
}
.container {
position: absolute;
left: 300px;
top: 20px;
}
.container img {
width: 100%;
}
.icon {
margin-left: auto;
margin-right: auto;
display: block;
width: 100%;
height: auto;
max-width: 480px;
background-color: blue;
box-shadow: 5px 5px 0px #888888;
text-align: center;
font-size: 26px;
color: white;
text-decoration: none;
padding: 5px;
cursor: pointer;
border: none;
outline: none;
user-drag: none;
}
<div class="container">
<img class="icon" src="http://placehold.it/350x350" />
<div class="sum-container left">
<img src="http://placehold.it/350x150" />
</div>
</div>

Background-color for a div around all content inside

I'm working on a 'arrow'-div. It currently looks like this:
the div contains two other divs(two lines). And I want that the background is nearly wrapped around the lines. But the height of the yellow-background is a lot smaller than the height of the lines. I already tried 'height: auto'. I hope someone could help me out.
#lineAll {
background-color: yellow;
height: auto;
}
#line1 {
height: 2px;
background-color: black;
transform: rotate(35deg);
width: 40px;
}
#line2 {
height: 2px;
background-color: black;
transform: rotate(-35deg);
width: 40px;
margin-top: 20px;
}
<div id="lineAll">
<div id="line1"></div>
<div id="line2"></div>
</div>
edit:
The width is also not the way I want it. It's currently 100%-width of the screen.
Try this:
<div style="background-color : yellow; padding: 15px 0px; width: 40px;">
<div id="lineAll">
<div id="line1"></div>
<div id="line2"></div>
</div>
</div>
<style>
#lineAll {
background-color: yellow;
height: auto;
}
#line1 {
height: 2px;
background-color: black;
transform: rotate(35deg);
width: 40px;
}
#line2 {
height: 2px;
background-color: black;
transform: rotate(-35deg);
width: 40px;
margin-top: 20px;
}
You can do this with one element and :after pseudo-element. Just create smaller pseudo-element that has border-top and border-right and then rotate it for 45deg.
.element {
width: 50px;
height: 60px;
background: yellow;
position: relative;
}
.element:after {
content: '';
position: absolute;
top: 15px;
border-top: 1px solid black;
border-right: 1px solid black;
height: 30px;
width: 30px;
transform: rotate(45deg);
}
<div class="element"></div>
To create other button just rotate for -135deg and set right: 0px
.element {
width: 50px;
height: 60px;
background: yellow;
position: relative;
display: inline-block;
margin: 50px;
}
.element:after {
content: '';
position: absolute;
top: 15px;
border-top: 1px solid black;
border-right: 1px solid black;
height: 30px;
width: 30px;
transform: rotate(45deg);
}
.element.right:after {
transform: rotate(-135deg);
right: 0px;
}
<div class="element"></div>
<div class="element right"></div>
Why don't you try drawing a triangle shape with css since it gives the same result you want to achieve
.triangle {
display: block;
width: 0;
height: 0;
border-top: 108px solid transparent;
border-right: 0 solid transparent;
border-bottom: 108px solid transparent;
border-left: 108px solid #4abdac;
}
<html>
<head></head>
<body>
<div class="triangle"></div>
</body>
</html>
Try this
#lineAll {
background-color: yellow;
height: auto;
padding: 10px 0;
}
live demo - https://jsfiddle.net/grinmax_/j4aza1om/
Just use
overflow: hidden;
display: inline-block;
#lineAll {
background-color: yellow;
overflow: hidden;
display: inline-block;
}
#line1 {
height: 2px;
background-color: black;
transform: rotate(35deg);
width: 40px;
}
#line2 {
height: 2px;
background-color: black;
transform: rotate(-35deg);
width: 40px;
margin-top: 20px;
}
<div id="lineAll">
<div id="line1"></div>
<div id="line2"></div>
</div>

Creating angled shape using CSS

Is it possible to create a shape like this using the CSS border?
I saw some other stack overflow posts regarding making some border modifications, but nothing specifically like this. Can someone point me in the right direction?
Thanks
Based on https://css-tricks.com/examples/ShapesOfCSS/:
#base {
background: red;
display: inline-block;
height: 30px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 200px;
text-align: center;
}
#base:before {
border-bottom: 15px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: -15px;
width: 0;
}
<div id="base"><span>BACK TO TOP</span></div>
Just modify the width and height for your needs, it is really easy.
You can create this shape using css :before and :after selectors:
#back {
background: #fff;
border:1px solid #333;
display: inline-block;
height: 20px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 120px;
text-align: center;
}
#back:before {
border-bottom: 15px solid #fff;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: -15px;
width: 0;
z-index:2;
}
#back:after {
border-bottom: 15px solid #333;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: -16px;
width: 0 ;
z-index:1;
}
<div id="back"><span>Back to Top</span></div>
Fully adaptive and transparent...
* {
margin: 0;
padding: 0;
}
body {
position: relative;
width: 100vw;
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, .7) 100%), url('http://beerhold.it/1024/600');
background-repeat: no-repeat;
background-size: cover;
}
.border-arrow-top {
display: inline-block;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
font-size: 6vh;
text-transform: uppercase;
padding: 0 10vw;
padding-bottom: 2vh;
border: 3px solid white;
border-top: none;
position: relative;
}
.border-arrow-top:before,
.border-arrow-top:after {
content: '';
position: absolute;
top: 0%;
border-top: 3px solid white;
width: 50%;
}
.border-arrow-top:before {
left: 0;
transform-origin: -3px -50%;
/* x-coord: -[size of border] */
transform: skewy(-10deg);
}
.border-arrow-top:after {
right: 0;
transform-origin: calc(100% + 3px) -50%;
/* x-coord: 100% + size of border */
transform: skewy(10deg);
}
<div class="border-arrow-top">
Back to Top
</div>
I had written a tutorial for the same, arrow heads and triangles with CSS which can be read here: http://time2hack.com/2014/10/triangles-and-arrow-heads-css.html.
The trick works on the basis of borders and their colors. The direction in which arrow has to point; border of that side can be 0 and rest of the sides will create the arrow head.
The main role will be of opposite side border; if arrow has to point to top, border-bottom will create the arrow and rest can be transparent and if arrow has to point to bottom, the border-top will be of some color and other will be transparent. Similar is for arrow pointing left and right.
The transparent color will work fine in all browser except IE8 and below; for this you can set the color to the matching background, so that it is not visible.
By customizing the fiddle http://jsfiddle.net/95Xq8/ The given below is the output
Check the fiddle
.arrow-wrap{ width:125px; margin:auto; padding:100px 0;}
.arrow-button {
width: 125px;
height: 50px;
line-height: 50px;
position: relative;
background: #f00;
text-align: center; text-decoration:none; color:#000; display:block;
color:#fff;
}
.arrow-tip {
display: block;
width: 101px;
height: 115px;
margin: 0;
-webkit-transform: rotate(45deg) skew(-18deg,-23deg);
}
.arrow-tip-container {
display: block;
width: 125px;
height: 40px;
position: absolute;
top: -40px;
left: 0px;
overflow: hidden;
}
.arrow-tip-grad {
display: block;
width: 100%;
height: 100%;
background: red;
}
<div class="arrow-wrap">
<a href="#" class="arrow-button">Back to top
<span class="arrow-tip-container">
<span class="arrow-tip">
<span class="arrow-tip-grad"></span>
</span>
</span>
</a>
</div>

How can you create two triangles next to an image?

How can you create two triangles next to an image?
As you can see in the jsfiddle, the triangles are not tounching the image. I want them to touch the image and the blue bar above.
I tried this post: How can I have an image float next to a centered div? didn't work.
.content {
width: 960px;
margin: 0 auto;
}
ul.producten {
margin-top: 4%;
list-style-type: none;
}
ul.producten li {
width: 315px;
}
ul.producten li img {
display: inline-block;
width: 295px;
}
.producten_top {
width: 315px;
height: 40px;
background: #3bcdff;
}
.producten_top h1 {
font-size: 30px;
color: #fff;
text-align: center;
padding: 5px 0;
}
.arrow_left {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #1c1c1d;
transform: rotate(225deg);
float: left;
}
.arrow_right {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #1c1c1d;
transform: rotate(315deg);
float: right;
}
<div class="content">
<ul class="producten">
<li>
<div class="producten_top"><h1>Test</h1></div>
<div class="arrow_left"></div>
<img src="http://assets.worldwildlife.org/photos/144/images/hero_small/Giant_Panda_Hero_image_(c)_Michel_Gunther_WWF_Canon.jpg?1345515244" alt="Plafond lampen">
<div class="arrow_right"></div>
</li>
</ul>
</div>
jsfiddle
what it needs to be:
Use position: absolute instead of display: inline-block and give 8px border for triangles instead of 5px and set display: block and margin: auto for make img center. of course you need to set position: relative; for parent (ul.producten li).
.content {
width: 960px;
margin: auto;
}
ul.producten {
margin-top: 4%;
list-style-type: none;
}
ul.producten li {
width: 315px;
position: relative;
}
ul.producten li img {
display: block;
width: 295px;
margin: auto;
}
.producten_top {
width: 315px;
height: 40px;
background: #3bcdff;
}
.producten_top h1 {
font-size: 30px;
color: #fff;
text-align: center;
padding: 5px 0;
}
.arrow_left {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #1c1c1d;
transform: rotate(225deg);
position: absolute;
left: 0;
top: 39px;
}
.arrow_right {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #1c1c1d;
transform: rotate(315deg);
position: absolute;
right: 0;
top: 39px;
}
<div class="content">
<ul class="producten">
<li>
<div class="producten_top"><h1>Test</h1></div>
<div class="arrow_left"></div>
<div class="arrow_right"></div>
<img src="http://assets.worldwildlife.org/photos/144/images/hero_small/Giant_Panda_Hero_image_(c)_Michel_Gunther_WWF_Canon.jpg?1345515244" alt="Plafond lampen">
</li>
</ul>
</div>
This technique makes a square div with a linear gradient alpha background that resembles a triangle. As a bonus, by adjusting the distance between alpha=1 and alpha=0 (the percentages) in the gradients you can change the anti-aliasing of the diagonal line (the left arrow has more anti-aliasing in this example).
.content {
width: 960px;
margin: 0 auto;
}
ul.producten {
margin-top: 4%;
list-style-type: none;
}
ul.producten li {
width: 315px;
position: relative;
}
ul.producten li img {
display: block;
width: 295px;
margin: auto;
}
.producten_top {
width: 315px;
height: 40px;
background: #3bcdff;
}
.producten_top h1 {
font-size: 30px;
color: #fff;
text-align: center;
padding: 5px 0;
}
.arrow_left {
width: 10px;
height: 10px;
background: linear-gradient(225deg, rgba(28,28,29,1) 44%,rgba(28,28,29,0) 56%);
position: absolute;
left: 0;
top: 40px;
}
.arrow_right {
width: 10px;
height: 10px;
background: linear-gradient(135deg, rgba(28,28,29,1) 48%,rgba(28,28,29,0) 50%);
position: absolute;
right: 0;
top: 40px;
}
<div class="content">
<ul class="producten">
<li>
<div class="producten_top"><h1>Test</h1></div>
<div class="arrow_left"></div>
<div class="arrow_right"></div>
<img src="http://assets.worldwildlife.org/photos/144/images/hero_small/Giant_Panda_Hero_image_(c)_Michel_Gunther_WWF_Canon.jpg?1345515244" alt="Plafond lampen">
</li>
</ul>
</div>
I have modified your css. The changes I made are:
Set the same width for the blue header and image
Set position fixed for image and right arrow
Set the arrows degrees values in negative
Check it out...
<html>
<head>
<style>
.content {
width: 960px;
margin: 0 auto;
}
ul.producten {
margin-top: 4%;
list-style-type: none;
}
ul.producten li {
width: 315px;
}
ul.producten li img {
display: inline-block;
width: 315px;
position: fixed;
}
.producten_top {
width: 315px;
height: 40px;
background: #3bcdff;
}
.producten_top h1 {
font-size: 30px;
color: #fff;
text-align: center;
padding: 5px 0;
}
.arrow_left {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #1c1c1d;
transform: rotate(-225deg);
float: left;
position: fixed;
}
.arrow_right {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #1c1c1d;
transform: rotate(-315deg);
float: right;
}
</style>
</head>
<body></body>
</html>