I'd like to add triangle seperators between the sections of a page. Each section has a transparent background color.
There's a parent div that wraps around the sections and has a fixed background image.
Example of what I'm trying to achieve:
I'm having trouble positioning the seperator/arrow and creating the white border around it.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Site Name</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="section-1 downarrow">
<p>Section 1</p>
</div>
<div class="section-2">
<p>Section 2</p>
</div>
<div class="section-3">
<p>Section 2</p>
</div>
</div>
</body>
</html>
CSS:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
ul {list-style:none; list-style-position:outside;}
a {outline: none;}
.wrapper {
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.section-1 {
height: 500px;
background-color: rgba(12, 85, 184, .9);
}
.section-2 {
height: 500px;
background-color: rgba(95, 20, 20, .9);
}
.section-3 {
height: 500px;
background-color: rgba(12, 85, 184, .9);
}
.downarrow:after,.downarrow:before {
content: '';
position: absolute;
bottom: 0;
width: 50%;
z-index: 100;
border-bottom: 40px solid #fff;
-moz-transform: rotate(0.000001deg);
-webkit-transform: rotate(0.000001deg);
-o-transform: rotate(0.000001deg);
-ms-transform: rotate(0.000001deg);
transform: rotate(0.000001deg)
}
.downarrow:before {
right: 50%;
border-right: 40px solid transparent;
border-left: 1000px solid #fff;
}
.downarrow:after {
left: 50%;
border-left: 40px solid transparent;
border-right: 1000px solid #fff;
}
.downarrow {
overflow: hidden;
}
Any help or suggestions would be greatly appreciated.
Please check the updated one, i made some efforts to make it a look like as per the example image provided. please review the code. Hope it is helpful to you.
Note: Please update dimensions accordingly as per requirement. It is just a dummy.
.wrap {
position: relative;
height:300px;
overflow: hidden;
width: 80%;
margin: 0 auto;
background: url(https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg) no-repeat center center;
overflow:hidden;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.arrow {
position: absolute;
top: 50%;
width: 100%;
padding-bottom:3%;
margin-top: -3%;
background-color: rgba(0, 0, 0, 0.8);
}
.arrow:before, .arrow:after {
content:'';
position: absolute;
bottom: 100%;
width: 50%;
padding-bottom:inherit;
background-color: inherit;
border-top: 2px solid #fff;
}
.arrow:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
border-right: 3px solid #fff;
margin-right:-2px;
}
.arrow:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
border-left: 3px solid #fff;
margin-left:-2px;
}
.arrow1 {
position: absolute;
bottom: 50%;
width: 100%;
padding-bottom:3%;
background-color: rgba(0, 0, 0, 0.8);
transform: rotate(180deg);
margin-bottom: -3%;
}
.arrow1:before, .arrow1:after {
content:'';
position: absolute;
bottom: 100%;
width: 50%;
padding-bottom:inherit;
background-color: inherit;
border-top: 2px solid #fff;
}
.arrow1:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
border-right: 3px solid #fff;
margin-right:-2px;
}
.arrow1:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
border-left: 3px solid #fff;
margin-left:-2px;
}
<div class="wrap">
<div class="arrow"></div>
<div class="arrow1"></div>
</div>
Related
I have a card-element (bootstrap-4) with a front and back, on hover the back side is shown.
In order to create a "folded corner effect" I am using a pseudo-element(:before) on the front card, which works fine for all browsers except of firefox.
The bottom-left corner of the pseudo-element should also be rounded, so I set a border-radius. Unfortunately in Firefox the corner is not rounded, instead there is a strange box shown in the pseudo-element.
Any ideas what is causing this issue in Firefox? I already played around with positioning, z-index, overflow etc. but I cannot find the root cause.
Thanks a lot in advance!!
https://jsfiddle.net/rbv5ob20/
HTML:
.card {
color: white;
border: transparent;
border-radius: 10px;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}
.front,
.back {
width: 100%;
height: 150px;
background: #99d0e9;
opacity: 1;
backface-visibility: hidden;
overflow: hidden;
border-radius: 10px 0px 10px 10px;
}
.front {
position: absolute;
left: 0;
z-index: 1;
opacity: 1;
text-align: left;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-width: 0px 25px 25px 0px;
border-style: solid;
border-color: transparent #f6f6f6 #32a2d4 transparent;
border-bottom-left-radius: 10px;
}
.back {
background: #32a2d4;
opacity: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
text-align: right;
border-top-right-radius: 10px;
display: block;
}
.card:hover .back {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
.card:hover .front {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<section id="offering" style="background-color:#f6f6f6;">
<div class="container">
<div class="col-4 text-center">
<div class="card">
<div class="front">
this is front...
</div>
<div class="back">
this is back
</div>
</div>
</div>
</div>
</section>
In Firefox border-radius doesn't seem to get properly applied to elements with a width and height of 0. A possible workaround to this would be to make a wrapper with overflow: hidden and a border-radius on its own:
.roundArrow {
border-radius: 0 0 0 10px;
width: 50px;
height: 50px;
overflow: hidden;
}
.roundArrow:after {
content: "";
display: block;
top: 0px;
right: 0px;
border-width: 0px 50px 50px 0px;
border-style: solid;
border-color: transparent #f6f6f6 #32a2d4 transparent;
}
<div class="roundArrow"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.card {
color: white;
border: transparent;
border-radius: 10px ;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}
.front, .back {
width: 100%;
height:150px;
background: #99d0e9;
opacity: 1;
backface-visibility: hidden;
overflow: hidden;
border-radius: 10px 0px 10px 10px;
}
.front {
position: absolute;
left: 0;
z-index: 1;
opacity:1;
text-align:left;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-bottom-left-radius: 10px;
height: 25px;
width: 25px;
background: #32a2d4;
}
.front::after {
content: "";
position: absolute;
top: -11px;
right: -17px;
height: 28px;
width: 35px;
background: white;
transform: rotate(45deg);
}
.back {
background: #32a2d4;
opacity: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
text-align:right;
border-top-right-radius: 10px;
display: block;
}
.card:hover .back {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
.card:hover .front {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
</head>
<body>
<section id="offering" style="background-color:#f6f6f6;">
<div class="container">
<div class="col-4 text-center">
<div class="card">
<div class="front">
this is front...
</div>
<div class="back">
this is back
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Following changes of ::before pseudo-element may work for you and you also have to add ::after pseudo-element for this solution.
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-bottom-left-radius: 10px;
height: 25px;
width: 25px;
background: #32a2d4;
}
.front::after {
content: "";
position: absolute;
top: -11px;
right: -15px;
height: 25px;
width: 35px;
background: white;
transform: rotate(40deg);
}
I have a card-element (bootstrap-4) with a front and back, on hover the back side is shown.
In order to create a "folded corner effect" I am using a pseudo-element(:before) on the front card, which works fine for all browsers except of firefox.
The bottom-left corner of the pseudo-element should also be rounded, so I set a border-radius. Unfortunately in Firefox the corner is not rounded, instead there is a strange box shown in the pseudo-element.
Any ideas what is causing this issue in Firefox? I already played around with positioning, z-index, overflow etc. but I cannot find the root cause.
Thanks a lot in advance!!
https://jsfiddle.net/rbv5ob20/
HTML:
.card {
color: white;
border: transparent;
border-radius: 10px;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}
.front,
.back {
width: 100%;
height: 150px;
background: #99d0e9;
opacity: 1;
backface-visibility: hidden;
overflow: hidden;
border-radius: 10px 0px 10px 10px;
}
.front {
position: absolute;
left: 0;
z-index: 1;
opacity: 1;
text-align: left;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-width: 0px 25px 25px 0px;
border-style: solid;
border-color: transparent #f6f6f6 #32a2d4 transparent;
border-bottom-left-radius: 10px;
}
.back {
background: #32a2d4;
opacity: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
text-align: right;
border-top-right-radius: 10px;
display: block;
}
.card:hover .back {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
.card:hover .front {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<section id="offering" style="background-color:#f6f6f6;">
<div class="container">
<div class="col-4 text-center">
<div class="card">
<div class="front">
this is front...
</div>
<div class="back">
this is back
</div>
</div>
</div>
</div>
</section>
In Firefox border-radius doesn't seem to get properly applied to elements with a width and height of 0. A possible workaround to this would be to make a wrapper with overflow: hidden and a border-radius on its own:
.roundArrow {
border-radius: 0 0 0 10px;
width: 50px;
height: 50px;
overflow: hidden;
}
.roundArrow:after {
content: "";
display: block;
top: 0px;
right: 0px;
border-width: 0px 50px 50px 0px;
border-style: solid;
border-color: transparent #f6f6f6 #32a2d4 transparent;
}
<div class="roundArrow"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.card {
color: white;
border: transparent;
border-radius: 10px ;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}
.front, .back {
width: 100%;
height:150px;
background: #99d0e9;
opacity: 1;
backface-visibility: hidden;
overflow: hidden;
border-radius: 10px 0px 10px 10px;
}
.front {
position: absolute;
left: 0;
z-index: 1;
opacity:1;
text-align:left;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-bottom-left-radius: 10px;
height: 25px;
width: 25px;
background: #32a2d4;
}
.front::after {
content: "";
position: absolute;
top: -11px;
right: -17px;
height: 28px;
width: 35px;
background: white;
transform: rotate(45deg);
}
.back {
background: #32a2d4;
opacity: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
text-align:right;
border-top-right-radius: 10px;
display: block;
}
.card:hover .back {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
.card:hover .front {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
</head>
<body>
<section id="offering" style="background-color:#f6f6f6;">
<div class="container">
<div class="col-4 text-center">
<div class="card">
<div class="front">
this is front...
</div>
<div class="back">
this is back
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Following changes of ::before pseudo-element may work for you and you also have to add ::after pseudo-element for this solution.
.front::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
border-bottom-left-radius: 10px;
height: 25px;
width: 25px;
background: #32a2d4;
}
.front::after {
content: "";
position: absolute;
top: -11px;
right: -15px;
height: 25px;
width: 35px;
background: white;
transform: rotate(40deg);
}
Hi i'm trying to create a cross browser css triangle mask that also works in ie10.
heres what i have http://codepen.io/adamjw3/pen/RoxrNJ but it doesn't work in ie.
Any other way of doing this?
.slider {
-webkit-clip-path: polygon(0 0, 68% 81%, 100% 0);
clip-path: polygon(0 0, 68% 81%, 100% 0);
overflow: hidden;
margin: 0 auto;
width: 30%;
}
img {
height: 100%;
width: 100%;
max-width: 100%;
}
Its is not supported in IE. You can think of a different approach. Why don't you make a triangle via css and keep image inside it ?
More info here
http://caniuse.com/#search=clip-path
UPDATE: Another concept for triangle
.box1 {
width: 232px;
height: 180px;
border-bottom: 1px solid #000;
overflow: hidden;
}
.box2 {
position: relative;
overflow: hidden;
transform: rotate(45deg) skew(10deg, 10deg);
border-left: 1px solid #000;
border-top: 1px solid #000;
width: 200px;
height: 200px;
margin: 81px 0 0 16px;
}
.box2_bg {
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg);
background-size: 100%;
background-position: center top;
transform: skew(-10deg, -10deg) rotate(-45deg);
transition: .3s;
background-size: 50%;
}
.box2_bg:hover {
background-size: 90%;
}
<div class="box1">
<div class="box2">
<div class="box2_bg"></div>
</div>
</div>
You can play with this.
To create this effect:
It is possible or would I need to design it with software?
You could use gradient as background
div {
background: -moz-linear-gradient(-45deg, #1e5799 50%, #207cca 50%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,#1e5799), color-stop(50%,#207cca), color-stop(100%,#7db9e8));
...
}
An example : http://jsfiddle.net/w9fYj/
You can do it with triangles (which basically works on border adjustments) How do CSS triangles work?
And other shapes for more
Here is extensive example with transforms of many divisions which may interest you.
Demo
HTML
<div class="wrapper">
<div class="shape3">
<div class="shape3-content">Hi there!</div>
</div>
<div class="shape1">
<div class="shape1-content">Hi there!</div>
</div>
<div class="shape2">
<div class="shape2-content">Hi there!</div>
</div>
</div>
css
.wrapper {
border: 1px solid #ff8888;
height: 480px;
left: 50%;
margin: -240px 0 0 -320px;
overflow: hidden;
position: absolute;
top: 50%;
width: 640px;
}
.shape1 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
background-color: #fff;
border: 1px solid black;
height: 50%;
left: -25%;
position: absolute;
top: 70%;
width: 150%;
}
.shape1-content {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
padding-left: 230px;
}
.shape2 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
background-color: #fff;
border: 1px solid #88ff88;
bottom: 244px;
height: 100%;
position: absolute;
right: 50%;
width: 100%;
}
.shape2-content {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
bottom: 10px;
position: absolute;
right: 10px;
}
.shape3 {
background:red;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
border: 1px solid #8888ff;
bottom: 40%;
height: 100%;
position: absolute;
right: 20%;
width: 100%;
}
.shape3-content {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
bottom: 50%;
position: absolute;
right: 10px;
}
Here it is using pure CSS:
HTML
<div id="test">
</div>
CSS
#test {
widh:300px;
height:150px;
background:#C3C3C3;
position:relative;
overflow:hidden;
}
#test:after {
content:'';
position:absolute;
right:-100px;
top:10px;
transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
-ms-transform:rotate(-30deg);
width:500px;
height:250px;
background:#880015;
}
And here is a FIDDLE
If you consider to support old browsers without using CSS3 then:
HTML
<div class="wrapper">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
CSS
.wrapper {
width: 400px;
height: 100px;
}
.left {
display: inline;
float: left;
background-color: #ccc;
width: 100px;
height: 100px;
}
.right {
display: inline;
float: right;
background-color: #610A0A;
width: 200px;
height: 100px;
}
.middle {
float:left;
display: inline;
line-height: 0%;
width: 0px;
border-top: 100px solid #ccc;
border-right: 100px solid #610A0A;
}
Fiddle Demo
I'd like to create a CSS button in the shape of a hexagon using a single div to keep the markup clean. I've been experimenting with before and after pseudo elements and can do it with the hexagon 'points' at top and bottom but would like to do it with them pointing left and right to fit the rest of my theme. I've got close but I can't get the after pseudo element where I want it. Can anyone fix this?
Here's where I'm up to:
#hex {
background-color:green;
width:100px;
height:100px;
float:left;
display:block;
}
#hex::before {
content:"";
border-top:50px solid red;
border-bottom:50px solid red;
border-right:30px solid blue;
float:left;
}
#hex::after {
content:"";
border-top:50px solid red;
border-bottom:50px solid red;
border-left:30px solid blue;
float:left;
}
and there's a JS Fiddle at http://jsfiddle.net/higginbottom/YKx2M/
try this example: http://jsbin.com/ipaked/6
(tested on Fx and Chrome)
relevant CSS
.hexagon {
position: relative;
width: 124px;
height: 100px;
background: #d8d8d8;
}
.hexagon:after,
.hexagon:before {
position: absolute;
content: "";
z-index: 1;
top: 0;
width: 0px;
background: #fff;
border-top: 50px transparent solid;
border-bottom: 50px transparent solid;
}
.hexagon:before {
left: 0;
border-right: 30px #d8d8d8 solid;
}
.hexagon:after {
right: 0;
border-left: 30px #d8d8d8 solid;
}
(Adjust border-width and size of the hexagon so it can look as you prefer.)
As alternative you can also use a single pseudoelement in which you could show the black hexagon unicode character U+2B21, like in this example: http://jsbin.com/ipaked/7
CSS
.hexagon {
position: relative;
width: 120px;
height: 100px;
line-height: 100px;
text-align: center;
}
.hexagon:before {
position: absolute;
content: "\2B21";
font-size: 160px;
z-index: 1;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
This is probably a better choice (if using a relative font size) so the hexagon can adjust itself when the user increase or decrease the base font-size on his browser.
I'm using clip-path:
.btn {
display: inline-block;
text-align: center;
text-decoration: none;
vertical-align: middle;
user-select: none;
padding: 0.375rem 2rem;
--btn-raise: 1rem;
clip-path: polygon(var(--btn-raise) 0%, calc(100% - var(--btn-raise)) 0%, 100% 50%, calc(100% - var(--btn-raise)) 100%, var(--btn-raise) 100%, 0 50%);
background-color: #fefd64;
text-transform: uppercase;
}
<a class="btn" href="/call">Call call</a>
Try This codepen link http://codepen.io/bherumehta/pen/egdXLv or http://codepen.io/bherumehta/pen/VPKRBG
.hexa{
width:300px;
background:red;
height:70px;
color:#fff;
postion:relative;
border-top:1px solid red;
border-bottom:1px solid red;
}
.hexa-inner{
height:70px;
position:relative;
}
.hexa-inner{
height:70px;
position:relative;
}
.hexa-inner:before{
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 50px;
background: red;
-webkit-transform: skew(-45deg, 0deg);
-moz-transform: skew(-45deg, 0deg);
-ms-transform: skew(-45deg, 0deg);
-o-transform: skew(-45deg, 0deg);
transform: skew(-45deg,0deg);
}
.hexa-inner:after {
content: '';
position: absolute;
top: 50%;
left: 0;
height: 50%;
width: 50px;
background: red;
-webkit-transform: skew(-135deg, 0deg);
-moz-transform: skew(-135deg, 0deg);
-ms-transform: skew(-135deg, 0deg);
-o-transform: skew(-135deg, 0deg);
transform: skew(-135deg, 0deg);
}
.left-arrow{
margin-left:-18px;
float:left;
}
.right-arrow{
transform:rotate(180deg);
float:right;
margin-right:-18px
}
.hexa p{
white-space:nowrap;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
}
HTML
<div class="hexa">
<div class="hexa-inner left-arrow"> </div>
<div class="hexa-inner right-arrow"> </div>
<p>hexagonhexagonhexagonhexagonhexagonhexagonhexagonhexagonhexago
xagonhexagonhexagonhexagonhexagonhexagonhexagon</p>
</div>