Create bottom responsive arrow
As pointed out by @ochi, there is already a solution that might work for you.
Bringing it back to your code, it would be something like this:
HTML:
<div class="col-xs-3 advantage grid-arrow">
<div>
Some text.
</div>
</div>
CSS:
.grid-arrow {
position: relative;
text-align: center;
background-color: red;
line-height: 2em;
border-top:300px solid #fff;
top:-300px;
}
.grid-arrow::after {
content: "";
position: absolute;
left: 0;
background-color: red;
padding-bottom: 50%;
width:57.7%;
z-index:-1;
-webkit-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform: rotate(-30deg) skewX(30deg);;
-ms-transform: rotate(-30deg) skewX(30deg);
transform: rotate(-30deg) skewX(30deg);
}
See JsFiddle.
full width responsive arrow on bottom of div
Using the border triangle technique with vw
unit: http://jsfiddle.net/hamop5ca/
30px is the arrow height.
nav {
position: relative;
height: 50px;
width:100%;
background: gray;
}
nav:before {
content: "";
position: absolute;
top: 100%;
left: 0;
border-top: 30px solid red;
border-left: 50vw solid transparent;
border-right: 50vw solid transparent;
}
<nav>nav</nav>
Want to make the arrow with border responsive
You might use vw
unit which is percentage of viewport width.
Read more.
.arrow-box {
border-bottom: 0;
position: relative;
background: #fff;
border: 1px solid #13aac5;
border-bottom: 0;
width: 96vw;
height: 240px;
margin:auto;
box-shadow: 1px 1px 21px 0px rgba(50, 50, 50, 0.3);
}
.arrow-box:before {
position: absolute;
bottom: -63px;
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 62px 48vw 0;
border-color: #13aac5 transparent transparent transparent;
content: '';
}
.arrow-box:after {
position: absolute;
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 62px 48vw 0;
border-color: #fff transparent transparent transparent;
content: '';
bottom: -62px;
}
<div class="arrow-box"></div>
Make an arrow shape with responsive width and only CSS
Here is another posibility.
This one does the trick with gradient backgrounds. You need 2 of them, so that the diagonal is easily achieved:
Relevant CSS:
.metric:before, .metric:after {
position: absolute;
top: -25px;
content: '';
width: 50%;
height: 25px;
}
.metric:before {
left: 0px;
background: linear-gradient(to right bottom, transparent 50%, lawngreen 50%);
}
.metric:after {
right: 0px;
background: linear-gradient(to left bottom, transparent 50%, lawngreen 50%);
}
Updated Fiddle
The differences with Simple As Could Be solution:
Pro Transparent corners (relevant if you have a background)
Con Worse browser support
How can I create a responsive Arrow-Pointer shape in CSS?
You may also use clip-path
to cut that arrow off.
The
clip-path
CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.
example
/* cut an arrow shape on the right side */
span {
clip-path: polygon( 0% 0%, calc(100% - 0.4em) 0%, 100% 50%, calc(100% - 0.4em) 100%, 0% 100%);
}
/* give it a shadow or a border ? */
div {
filter: drop-shadow(2px 2px 2px);
}
/* styling : size and colors */
span {
font-size: clamp(1em, 5vmax, 40px);
padding-right: 0.5em;
color: white;
float: left;
clear: left;
margin: 0.1em;
}
span:nth-child(1) {
background: #018133;
padding-left: 2em;
}
span:nth-child(2) {
background: #27B432;
padding-left: 2.8em;
}
span:nth-child(3) {
background: #88E213;
padding-left: 3.6em;
}
span:nth-child(4) {
background: #F0EF00;
padding-left: 4.2em;
}
span:nth-child(5) {
background: #FC9000;
padding-left: 5em;
}
span:nth-child(6) {
background: #FD0000;
padding-left: 5.8em;
}
span:nth-child(7) {
background: #FD001D;
padding-left: 6.45em;
}
<div>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>F</span>
<span>G</span>
</div>
CSS3 Steps Menu Full Width Responsive Arrow
you can achieve that using before and after pseudo elements and borders with a transparent color.
Here is an example of how to do it, this can be better optimized but I think it serves you as guide.
https://codepen.io/itscarlosisaac/pen/MOQOZO
.breadcrumbs-two{
margin: 0;
padding: 0;
list-style: none;
}
.breadcrumbs-two{
overflow: hidden;
width: 100%;
}
.breadcrumbs-two li{
float: left;
width: 18.3%;
}
.breadcrumbs-two a{
text-transform: uppercase;
float: left;
text-decoration: none;
color: #FFF;
position: relative;
text-align: center;
width: 100%;
height: 80px;
line-height: 1.3;
font-size: 15px;
}
.breadcrumbs-two a span {
display: inline-block;
max-width: 100%;
width: 150px;
margin: auto;
position: relative;
top: 20px;
}
.breadcrumbs-two a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -40px;
border-width: 40px 0 40px 30px;
border-style: solid;
border-color: #ddd #ddd #ddd transparent;
left: -30px;
}
.breadcrumbs-two a::after{
content: "";
position: absolute;
top: 50%;
margin-top: -40px;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 30px solid #ddd;
right: -30px;
}
.bread1 a {
background-color: #8ac43c;
}
.bread1 a::before {
border-color: #8ac43c #8ac43c #8ac43c transparent;
}
.bread1 a::after {
border-color: transparent #8ac43c transparent #8ac43c;
}
.bread2 a {
background-color: #69aa4e;
}
.bread2 a::before {
border-color: #69aa4e #69aa4e #69aa4e transparent;
}
.bread2 a::after {
border-color: transparent #69aa4e transparent #69aa4e;
}
.bread3 a {
background-color: #448e60;
}
.bread3 a::before {
border-color: #448e60 #448e60 #448e60 transparent;
}
.bread3 a::after {
border-color: transparent #448e60 transparent #448e60;
}
.bread4 a {
background-color: #1f7171;
}
.bread4 a::before {
border-color: #1f7171 #1f7171 #1f7171 transparent;
}
.bread4 a::after {
border-color: transparent #1f7171 transparent #1f7171;
}
.bread5 a {
background-color: #005581;
}
.bread5 a::before {
border-color: #005581 #005581 #005581 transparent;
}
.bread5 a::after {
border-color: transparent #005581 transparent #005581;
}
@media screen and (max-width: 991px) {
.breadcrumbs-two{
overflow-x:hidden;
overflow-y:visible;
padding-bottom:40px;
}
.breadcrumbs-two a span{ top:45px; }
.breadcrumbs-two li {
float: none;
width: 100vw;
height: 80px;
position:relative;
display:block;
overflow:visible;
}
.breadcrumbs-two li:first-child:before{
content:'';
display:block;
width: 100vw;
height:30px;
position:absolute;
top:0;
left:0;
right:0;
margin:auto;
border-top:30px solid white;
border-left:50vw solid transparent;
border-right:50vw solid transparent;
box-sizing:border-box;
z-index:1;
}
.breadcrumbs-two li:after{
content:'';
display:block;
width: 100vw;
height:30px;
position:absolute;
bottom:-30px;
left:0;
right:0;
margin:auto;
border-left:50vw solid transparent;
border-right:50vw solid transparent;
box-sizing:border-box;
}
.breadcrumbs-two a {
width: 100%;
}
li.bread1 {
z-index:10;
}
li.bread2 {
z-index:9;
}
li.bread3 {
z-index:8;
}
li.bread4 {
z-index:7;
}
li.bread5 {
z-index:6;
}
li.bread1:after{
border-top:30px solid #8ac43c;
}
li.bread2:after{
border-top:30px solid #69aa4e;
}
li.bread3:after{
border-top:30px solid #448e60;
}
li.bread4:after{
border-top:30px solid #1f7171;
}
li.bread5:after{
border-top:30px solid #005581;
}
}
Place two arrows on each side of a div AND make it responsive
Use flexbox on the .dashboard
div with the default direction of row
and adjust the HTML to take advantage of the flow.
.dashboard {
display: flex;
align-items: center;
justify-content: center;
}
<div class="dashboard">
<div class="left_button">
<button class="left-btn btn">Prev</button>
</div>
<div class="dashboard-pic">
<img src="http://www.fillmurray.com/140/200" alt="Sample Image">
</div>
<div class="right_button">
<button class="right-btn btn">Next</button>
</div>
</div>
<div class="dashboard">
<div class="left_button">
<button class="left-btn btn">Prev</button>
</div>
<div class="dashboard-pic">
<img src="http://www.fillmurray.com/460/300" alt="Sample Image">
</div>
<div class="right_button">
<button class="right-btn btn">Next</button>
</div>
</div>
Related Topics
How to Add Border to a Container with Transparent Gaps in Between
How to Indent Multiple Levels of Select Optgroup with CSS
@Font-Face Not Working on Mobile
What's the Difference Between HTML's and CSS's Width Attribute
Adding Http Request Header to a a Href Link
Remove Host Component Tag from HTML in Angular 4
CSS Display None and Opacity Animation with Keyframes Not Working
How to Add Div Inside Table Above Every <Tr>
What Elements Can a Span Tag Contain in HTML5
How to Properly Display German Characters in HTML
Get Click Event of Each Rectangle Inside Canvas
Html: How to Force Links to Open in a New Tab, Not New Window
Why Does a Diamond with a Questionmark in It Appear in My HTML