I am trying to add a responsive triangle piece to one of my divs (does not have to be IE8 compatible). I am struggling with making it responsive
http://jsfiddle.net/KzqB3/2/
CSS
.triangle {
width: 90%;
height: 0;
padding-left:10%;
padding-top: 10%;
overflow: hidden;
}
.triangle:after {
content: "";
position: absolute;
top: 66px;
display: block;
float: left;
width: 0;
height: 0;
left: 2%;
border-left: 275px solid transparent;
border-right: 275px solid transparent;
border-top: 50px solid #4679BD;
}
.content { width: 90%; background-color: #4679Bd; }
.content p { color: #fff; padding: 15px 0; }
HTML
<div class="content">
<p>Paragraph inside this div</p>
</div>
<div class="triangle"></div>
Fiddle Link
CSS
.triangle{
width: 56%;
height: 0;
padding-left: 45%;
padding-top: 45%;
overflow: hidden;
}
.triangle div {
width: 0;
height: 0;
margin-left:-500px;
margin-top:-500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 500px solid #4679BD;
}
.content { width: 90%; background-color: #4679Bd; }
.content p { color: #fff; padding: 15px 0; margin: 0; }
HTML
<div class="content">
<p>Paragraph inside this div</p>
</div>
<div class="triangle"><div></div></div>
Related
I am little stuck and need ur help, actually I am stuck in a problem I need to create an self pointing arrow to a rectangular box in css which I am unable to develop it Any help with example would be appreciated.
To understand the problem better I am attaching the desired output image.
I am also sharing my code what I have tried
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
You can give the second box a pseudo element and style it using clip-path to make a little arrow:
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
border-left-width: 0;
position: relative;
}
.container-2::after {
content: '';
display: block;
position: absolute;
background-color: black;
width: 10px;
height: 10px;
clip-path: polygon(100% 0, 80% 50%, 100% 100%, 0 50%);
bottom: 0;
left: 0;
transform: translateY(50%);
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
Perhaps this pseudo element ::after with a unicode arrow?
I additionally removed the left border
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
border-left:0;
}
.container-2::after {
content: "⮜";
position: absolute;
top: 140px;
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
Removed left border
Added pseudo element::before, could also be div with class arrow
Created triangle arrow
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
border-left: none;
position: relative;
}
.container-2:before {
content: '';
display: block;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-right: 8px solid black;
border-bottom: 4px solid transparent;
position: absolute;
left: 0;
bottom: -4px;
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
I'm nearly there after trawling various CSS sites and this one but would love some expert advice.
I'm trying to create a section header for a website that has 3 parts:
Title with button for a possible tooltip
Description
Call to Action button
Mockup attached.
I'm trying to adjust the arrow width so its not so "pointy" as it takes up additional space on the next area.
What I have so far is:
* {
box-sizing: border-box;
}
#RPheader {
float: left;
position: relative;
width: 40%;
padding: 10px;
height: 40px;
color: #FFFFFF;
background: #004851;
}
#RPheader:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
}
#RPheader:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid #004851;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
z-index: 1;
}
#RPdesc {
float: left;
position: relative;
width: 50%;
padding: 10px;
height: 40px;
color: #555555;
background-color: #F1ECEA;
}
#RPdesc:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
}
#RPdesc:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid #F1ECEA;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#RPheaderButton {
float: left;
width: 10%;
padding: 10px;
height: 40px;
color: #FFFFFF;
background-color: #00afd7;
}
<div id="RPheaderRow">
<div id="RPheader">Header title here</div>
<div id="RPdesc">This is where my description will go...</div>
<div id="RPheaderButton"> CTA </div>
</div>
I haven't done the tooltip part as yet...I will try and figure that out after this is done..yikes!
Any help much appreciated.
Chris.
You were almost there, just needed to adjust the border-left on the :before elements to a 10px value and then change the right property as well to -10px. I also updated the left and right padding on the RPDesc element and RPheaderButton element.
https://jsfiddle.net/disinfor/evy952bc/10/
* {
box-sizing: border-box;
}
#RPheader {
float: left;
position: relative;
width: 40%;
padding: 10px;
height: 40px;
color: #FFFFFF;
background: #004851;
}
#RPheader:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
}
#RPheader:before {
content: "";
position: absolute;
right: -5px;
bottom: 0;
width: 0;
height: 0;
border-left: 5px solid #004851;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
z-index: 1;
}
#RPdesc {
float: left;
position: relative;
width: 50%;
padding: 10px 20px;
height: 40px;
color: #555555;
background-color: #F1ECEA;
}
#RPdesc:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
}
#RPdesc:before {
content: "";
position: absolute;
right: -10px;
bottom: 0;
width: 0;
height: 0;
border-left: 10px solid #F1ECEA;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#RPheaderButton {
float: left;
width: 10%;
padding: 10px 10px 10px 20px;
height: 40px;
color: #FFFFFF;
background-color: #00afd7;
}
<div id="RPheaderRow">
<div id="RPheader">Header title here</div>
<div id="RPdesc">This is where my description will go...</div>
<div id="RPheaderButton"> CTA </div>
</div>
You can adjust those two values as needed, but that will get you closer to what you want.
You can consider background to achieve this easily without the need of pseudo element:
* {
box-sizing: border-box;
}
#RPheader {
float: left;
width: 40%;
padding: 10px;
height: 40px;
color: #FFFFFF;
background:
linear-gradient(to top right ,transparent 49.8%,#F1ECEA 50%) top right/20px 50%,
linear-gradient(to bottom right,transparent 49.8%,#F1ECEA 50%) bottom right/20px 50%,
#004851;
background-repeat:no-repeat;
}
#RPdesc {
float: left;
width: 50%;
padding: 10px;
height: 40px;
color: #555555;
background:
linear-gradient(to top right ,transparent 49.8%,#00afd7 50%) top right/20px 50%,
linear-gradient(to bottom right,transparent 49.8%,#00afd7 50%) bottom right/20px 50%,
#F1ECEA;
background-repeat:no-repeat;
}
#RPheaderButton {
float: left;
width: 10%;
padding: 10px;
height: 40px;
color: #FFFFFF;
background-color: #00afd7;
}
<div id="RPheaderRow">
<div id="RPheader">Header title here</div>
<div id="RPdesc">This is where my description will go ...</div>
<div id="RPheaderButton"> CTA </div>
</div>
You can also optimize your code like below:
* {
box-sizing: border-box;
}
#RPheaderRow > div {
float: left;
padding: 10px;
height: 40px;
color:#fff;
background:
linear-gradient(to top right ,transparent 49.5%,var(--c,transparent) 50%) top right/var(--s,20px) 50%,
linear-gradient(to bottom right,transparent 49.5%,var(--c,transparent) 50%) bottom right/var(--s,20px) 50%;
background-repeat:no-repeat;
}
div#RPheader {
width: 40%;
--c:#F1ECEA; /*adjust the color*/
background-color:#004851;
}
div#RPdesc {
width: 50%;
color: #555555;
--c:#00afd7;
--s:10px; /*adjust the size of the arrow*/
background-color:#F1ECEA;
}
div#RPheaderButton {
width: 10%;
background-color: #00afd7;
}
<div id="RPheaderRow">
<div id="RPheader" >Header title here</div>
<div id="RPdesc" >This is where my description will go ...</div>
<div id="RPheaderButton" > CTA </div>
</div>
I would add a top arrow and a bottom arrow in the section before to simulate this arow you're trying to get.
* {
box-sizing: border-box;
}
#RPheader {
float: left;
position: relative;
width: 40%;
padding: 10px;
height: 40px;
color: #FFFFFF;
background: #004851;
}
#RPheader:after {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-bottom: 20px solid #F1ECEA;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
#RPheader:before {
content: "";
position: absolute;
right: -20px;
top: 0;
width: 0;
height: 0;
border-top: 20px solid #F1ECEA;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
#RPdesc {
float: left;
position: relative;
width: 50%;
padding: 10px;
height: 40px;
color: #555555;
background-color: #F1ECEA;
}
#RPdesc:after {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-bottom: 20px solid #00afd7;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
#RPdesc:before {
content: "";
position: absolute;
right: -20px;
top: 0;
width: 0;
height: 0;
border-top: 20px solid #00afd7;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
#RPheaderButton {
float: left;
width: 10%;
padding: 10px;
height: 40px;
color: #FFFFFF;
background-color: #00afd7;
}
<div id="RPheaderRow">
<div id="RPheader">Header title here</div>
<div id="RPdesc">This is where my description will go...</div>
<div id="RPheaderButton"> CTA </div>
</div>
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>
I am having trouble adding gray color to the left of that div.
<div class="full-width">
<div class="footer-nav">
<div class="footer-nav-left">
<p class="text-center"> © Copyright 2016. All Rights Reserved </p>
</div>
<div class="footer-nav-right">
Nav links here
</div>
</div>
</div>
Please check link below for full code:
JS Fiddle
What I need is:
A 60 deg angle requires uneven borders.
.footer-nav-left:after { /* note, now an 'after' */
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 80px solid gray;
border-bottom: 0px solid transparent;
border-left: 0px solid transparent;
border-right: 40px solid transparent; /* half border-top */
position: absolute;
top: 0;
left: 100%;
}
For the grey background extending to the left side of the viewport, use another pseudo-element
.footer-nav-left:before {
content: '';
line-height: 0;
font-size: 0;
width: 50vw;
height: 100%;
background: inherit;
position: absolute;
top: 0;
right: 100%;
}
body {
margin: 0;
}
.full-width {
background-color: black;
overflow: hidden;
/* no scroll bar */
}
.footer-nav {
min-height: 80px;
width: 480px;
margin: 0 auto;
}
.footer-nav-left {
background-color: gray;
min-height: 80px;
position: relative;
float: left;
color: #FFFFFF;
z-index: 1001;
}
.footer-nav-left:before {
content: '';
line-height: 0;
font-size: 0;
width: 50vw;
height: 100%;
background: green;
/* for demo purposes: use inherit for production */
position: absolute;
top: 0;
right: 100%;
z-index: -1;
}
.footer-nav-left:after {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 80px solid gray;
border-bottom: 0px solid transparent;
border-left: 0px solid transparent;
border-right: 40px solid transparent;
position: absolute;
top: 0;
left: 100%;
}
.footer-nav-left p {
margin-top: 30px;
font-size: 15px;
}
<div class="full-width">
<div class="footer-nav">
<div class="footer-nav-left">
<p class="text-center">© Copyright 2016. All Rights Reserved</p>
</div>
<div class="footer-nav-right">
Nav links here
</div>
</div>
</div>
Note: the angled border only works (as would any) because the height of the parent is known. Percentage width borders are not yet possible.
Like this?
New css:
.footer-nav{
min-height: 80px;
width:100%; // <-- changed
margin:0 auto;
}
.footer-nav-left p{
margin-top: 30px;
font-size:15px;
margin-left: 80px; // <-- changed
}
Updated fiddle
Not sure about your border issue;
.footer-nav-left p{
margin-top: 30px;
font-size:15px;
margin-left:80px;
}
.footer-nav{
min-height: 80px;
width:960px;
margin:0 auto;
position:relative;
}
.footer-nav-left{
background-color:gray;
min-height:80px;
position: absolute;
left:0;
color:#FFFFFF;
z-index:1001;
}
I want the border div to be "hidden" behind the circle and not cross through it. I thought z-index was the way to do things like this.
Any ideas?
JSFIDDLE: http://jsfiddle.net/qs5xmege/1/
CSS and HTML
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Give .circle a position:relative, z-index works only with position:relative, position:absolute or position: fixed
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
position: relative;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Add position:relative; to .circle.
z-index need relative, absolute or fixed vaue for position.
Set position:relative of div circle and z-index:2 ie. 1 more than border is enough
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
Snippet
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Try like this:
.circle {
background-color: #fff;
border: 3px solid red;
border-radius: 11px;
display: block;
height: 22px;
margin: 0 auto;
position: relative;
top: -68px;
width: 22px;
}
.border {
border-right: thin solid black;
height: 100px;
width: 50%;
}