here I'm using pseudo class element overlapping each other here before div border white color I want to give color with opacity like arrow color. I tried using color to ::before instead of white color but with opacity, it's not working. Can anyone suggest how white color change same as arrow color i want to cut the image and show an arrow in the background.
.box {
position: relative;
width: 200px;
height: auto;
padding: 100px;
}
.box:before {
content: '';
position: absolute;
bottom: 102px;
right: -86px;
border-top: 80px solid transparent;
border-right: 80px solid #fff;
width: 0;
z-index: 1;
}
.box::after {
border-style: solid;
border-width: 5em 5em 0 0;
content: '';
display: block;
top: 91px;
height: 8em;
left: 185px;
transform: rotate(-135deg);
width: 8em;
position: absolute;
z-index: -1;
color: rgba(255, 0, 0, 0.3);
}
<div class="box">
<img src="https://thumb.ibb.co/gdi10F/slide11.jpg" class="iva-img" alt="slide11" border="0">
</div>
<span class="chevron left"></span>
Want to achieve like this
You can use clip-path to cut the image and simplify the code of the arrow like below:
.box {
position: relative;
margin: 4em;
z-index:0;
display:inline-block;
}
img {
display:block;
margin:1em;
clip-path:polygon(0 0,100% 0, 100% calc(100% - 5em), calc(100% - 5em) 100%,0 100%);
}
.box::after {
border-style: solid;
border-width: 5em 0 0 5em;
content: '';
top: 0;
height: 100%;
left: 0;
width: 100%;
position: absolute;
z-index: -1;
color: rgba(255, 0, 0, 0.3);
transform: translateX(6em) rotate(-45deg);
box-sizing:border-box;
}
<div class="box">
<img src="https://thumb.ibb.co/gdi10F/slide11.jpg" class="iva-img" alt="slide11" border="0">
</div>
Related
So I've managed to create a CSS Triangle with 3 different coloured borders. It can be seen here: https://codepen.io/nuul/pen/oNbeZey
CSS code:
$bg: #0000e5
$color: ((#00007c, #0000e5), (#0000b0, #0000e5), (#0000ff, #0000e5))
#mixin linear-gradient($direction, $gradients...)
background-image: linear-gradient($direction, $gradients...)
#function colorL($some-color, $num)
#return nth($some-color, $num)
#for $i from 1 through length($color)
.sq-#{$i}
#include linear-gradient(colorL(nth($color, $i), 2) 60%, colorL(nth($color, $i), 1) 75%)
$height: 9px
$width: $height * 3.47
body
background: #3D4849
.blueCore
position: absolute
left: 5px
top: 15px
.sq-wrapper
width: $width
height: $height
font-size: 0
display: inline-block
clip-path: polygon(50% 0%, 0 100%, 100% 100%)
position: absolute
left: 0
top: $height
transform-origin: 50% 0
.sq-1-wrapper
transform: rotate(0deg)
.sq-2-wrapper
transform: rotate(240deg)
.sq-3-wrapper
transform: rotate(-240deg)
.sq
width: 100%
height: 100%
.blueBlock
background-color: #0000e5
border: 3px solid
border-top-color: #0000ff
border-right-color: #00007c
border-bottom-color: #00007c
border-left-color: #0000ff
width: 42px
height: 42px
position: relative
z-index: 10
Though I am happy with the result, I am still wondering if the CSS code for this can be simplified (since there is a lot of CSS code needed for just a triangle). Perhaps with a :before :after? The looks should stay the same
Any thoughts?
ps: You can ignore the square around it, I just want to put it in a div for future usage
Thanks!
In terms of your question, I wouldn't recommend using CSS for this and maybe in this situation, an image or even font-awesome would be more efficient. However, you could possibly tweak something like below. It uses two elements to create this shape.
.outer {
position: relative;
height: 200px;
width: 200px;
background: dimgray;
}
.outer:before {
/*Bottom Border Here*/
content: "";
position: absolute;
height: 10%;
width: 90%;
left: 5%;
top: 88%;
z-index: 10;
background: darkblue;
transform: perspective(100px) rotateX(60deg);
}
.outer:after {
/*Triangle Background*/
content: "";
position: absolute;
width: 0;
left: 10px;
bottom: 10px;
border-top: 0;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
border-bottom: 150px solid blue;
}
.inner {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.inner:before {
content: "";
position: absolute;
height: 10%;
width: 90%;
left: -17%;
top: 50%;
background: lightblue;
/*Left border colour here*/
transform: rotate(121deg) perspective(100px) rotateX(60deg);
}
.inner:after {
content: "";
position: absolute;
height: 10%;
width: 90%;
right: -18%;
top: 50%;
background: rgb(0, 0, 220);
/*right border colour here*/
transform: rotate(-120deg) perspective(100px) rotateX(60deg);
}
/*demo only*/
.outer:hover:before { background: darkred;}
.outer:hover:after { border-bottom-color: red;}
.outer:hover .inner:before { background: tomato;}
.outer:hover .inner:after { background: rgb(220, 0, 0);}
<div class="outer">
<div class="inner"></div>
</div>
one element and responsive solution:
.box {
width: 200px;
display: inline-flex;
background:
conic-gradient(at 50% 20px, red 150deg, #0000 0 210deg, green 0)
blue;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.box::before {
content: "";
padding-top: calc(86.6% - 10px);
width: 100%;
box-sizing: border-box;
border:solid transparent;
border-bottom-color: gold;
border-width: 0 18px 10px 18px;
}
<div class="box"></div>
<div class="box" style="width:150px;"></div>
<div class="box" style="width:50px;"></div>
I have a few SVG glyphs whitch i need to draw with HTML.
Is it possible to create HTML with CSS so that it looks like the SVG?
My problem was the shadow at the arrows.
You could use clip-path for the arrows (and its shadow too) and pseudoelements with a box-shadow for the figure with the overlapped boxes
Codepen example
Markup
<div class="arrow">Arrow</div>
<div class="boxes">Boxes</div>
Css
.arrow {
height: 55px;
width: 250px;
position: relative;
line-height: 55px;
padding: 0 35px;
}
.arrow::before, .arrow::after {
content: "";
display: block;
height: inherit;
width: inherit;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background: #666;
clip-path: polygon(0 0, 25px 50%, 0% calc(100% - 5px), 85% calc(100% - 5px), 100% 50%, 85% 0);
}
.arrow::after {
transform: translate(5px, 5px);
opacity: .25;
}
.boxes, .boxes::before, .boxes::after {
position: relative;
background: #f2f2f2;
height: 180px;
width: 180px;
border-color: #999;
border-style: solid;
border-width: 1px;
border-top-width: 2px;
border-right-width: 2px;
box-shadow: 3px 4px 0 #ccc;
}
.boxes::before, .boxes::after {
content: "";
position: absolute;
display: block;
}
.boxes::after { top: -12px; left: 4px; z-index: -1; }
.boxes::before { top: -20px; left: 14px; z-index: -2; }
The other two figures can be obtained with the same approach (they are just a simple change of size and colours)
Result
here is one of shape:
body{
padding:20px;
}
div {
position:relative;
display: inline-block;
background: red;
position:relative;
padding: 9px;
padding-right: 22px;
}
div:before {
content: "";
border-style: solid;
border-width: 17px 15px 17px 0px;
border-color: transparent red transparent transparent;
position: absolute;
left: -15px;
top: 1px;
}
div:after {
content: "";
border-style: solid;
border-width: 17px 15px 17px 0px;
border-color: transparent white transparent transparent;
position: absolute;
left: 93px;
top: 0px;
}
<div class="triangle">Hello world </div>
Example of what i want to do right:
I'm trying to create an arrow more like a double arrow. My aim is to have one class for it but I have tried what I know and it's not working.
If anyone can direct me to right way it will be great
.wrapper{
width: 250px;
height: 150px;
background:black;
}
.arrow1{
left:0px;
width: 0;
height: 0;
border-style: solid;
border-width: 37.5px 0 37.5px 75px;
border-color: transparent transparent transparent #007bff;
}
<div class="wrapper">
<div class="arrow1"></div>
</div>
https://jsfiddle.net/7mfquq2y/
Thanks
You may consider pseudo element and rotation like this :
.arrow1 {
height: 120px;
width: 100px;
overflow: hidden;
position: relative;
}
.arrow1:before,
.arrow1:after {
content: " ";
position: absolute;
width: 60px;
height: 60px;
background: rgba(0, 128, 0, 0.6);
transform: rotate(45deg);
left: -30px;
top: 40px;
}
.arrow1:after {
top: 20px;
}
<div class="arrow1"></div>
Alternatively, applying initial border property values to pseudo-elements, as demonstrated in the code snippet embedded below.
Code Snippet Demonstration:
.wrapper{
width: 250px;
height: 150px;
background:black;
}
.arrow {
height: 95px;
position: relative; /* required */
}
.arrow:before, .arrow:after {
content: "";
position: absolute;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 37.5px 0 37.5px 40px;
border-color: transparent transparent transparent rgba(0, 123, 255, 0.7);
}
.arrow:after {
bottom: 0;
}
.arrow:before {
top: 0;
}
<div class="wrapper">
<div class="arrow"></div>
</div>
Updated JSFiddle
.box {
position: relative;
margin: 18px;
width: 8em;
height: 6em;
border: 1px solid rgb(77, 77, 77);
color: #FF1919;
background-color: pink;
}
.box:hover {
width: 8em;
margin: 18px;
}
.box:before {
content: '';
position: relative;
width: 30%;
left: 18px;
right: 80%;
height: 40px;
top: 30%;
background: rgba(0, 0, 0, 0.1);
display: inline-block;
background-color: blue;
}
.box:after {
content: '';
position: absolute;
left: 43%;
top: 30%;
margin-top: -18px;
border-style: solid;
border-width: 40px;
border-color: transparent transparent transparent rgba(0, 0, 0, 0.1);
}
<div class="box"></div>
I have created one arrow and in that I want to highlight the arrow head with blue colour which is grey.
I also want to use this total arrow as a button to navigate to next scene page with html extension.
For that I am using:
<div style="position: absolute; right: 40px; bottom: 70px;">
<form action="abc.html" align="right" style="margin-right:100px ; display:inline">
<input type="submit" class="box"></input>
</form>
</div>
but it is taking a single part of that css object(rectangle) box and leaving other portions.
Ye u can simply using pseudo elemnts.
.arrow {
height: 50px;
width: 50px;
background: #0000ff;
margin: 20px;
position: relative;
}
.arrow:after {
content: '';
position: absolute;
top: -15px;
right: -80px;
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 80px solid #0000ff;
border-bottom: 40px solid transparent;
}
.box {
width: 165px;
padding: 20px;
border: 1px solid #222;
background: #eee;
}
<a href="abc.html">
<div class="box">
<div class="arrow"></div>
</div>
</a>
Maybe you could use an HTML special character arrow sign like this ➧ ➧
This way you could play with the color, size etc. the way you like
Here is the code:
<div class="box">➧</div> this is for a separate div
And this is for an input. Please note that the type was changed to button
<div style="position: absolute; right: 40px; bottom: 70px;">
<form action="abc.html" align="right" style="margin-right:100px ; display:inline">
<input type="button" class="box" value="➧"></input>
</form>
And the CSS for both is
.box {
width:100px;
height:100px;
background-color:pink;
color:blue;
text-align:center;
font-size:100px;
line-height:100px;
}
You just need to change the property for the :after pseudo-element that represent the head
border-color: transparent transparent transparent rgba(0, 0, 255, 1);
.box {
position: relative;
margin: 18px;
width: 8em;
height: 6em;
border: 1px solid rgb(77, 77, 77);
color: #FF1919;
background-color: pink;
position: relative;
}
.box:before {
content: '';
position: absolute;
width: 30%;
left: 20%;
height: 40px;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.1);
background-color: blue;
}
.box:after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 50%;
/* before width 30% + before left position 20% */
border-style: solid;
border-width: 40px;
border-color: transparent transparent transparent rgba(0, 0, 255, 1);
}
<div class="box"></div>
For navigation you can add <a> tag in your html page and for color of the class .box:after change the border color as below:
HTML:
<div class="box"></div>
CSS:
.box:after {
content: '';
position: absolute;
left: 43%;
top: 30%;
margin-top: -18px;
border-style: solid;
border-width: 40px;
border-color: transparent transparent transparent **rgba(7, 17, 241, 1);** }
FIDDLE
I need to create a CSS shape like this image..
Please check this fiddle of my work
I have created something like that, but I cannot give a curve to it.
#shape {
border-left: 70px solid transparent;
border-top: 100px solid red;
height: 0;
width: 200px;
}
Can anyone help me?
You can use a pseudo element with border-radius and background-shadows to create the curve and enable a transparent background for the curve.
Output :
#shape {
width: 300px; height: 100px;
position: relative;
overflow: hidden;
}
#shape:before {
content: '';
position: absolute;
top: 10%; right: 0;
width: 300%;
padding-bottom: 300%;
border-radius: 100%;
background: none;
box-shadow: 10px -10px 5px 300px #F15723;
z-index: -1;
}
body{background:url(https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg);background-size:cover;}
<div id="shape"></div>
demo
Variant #01:
CSS3 linear-gradient() can draw this background as well:
CSS:
div {
background: linear-gradient(45deg, transparent 50px, tomato 50px);
}
Output Image:
body {
background: linear-gradient(lightgreen, green);
min-height: 100vh;
margin: 0;
}
div {
background: linear-gradient(45deg, transparent 50px, tomato 50px);
height: 150px;
margin: 20px;
width: 400px;
}
<div>
</div>
Variant #02:
We can use :before and :after pseudo elements and use css3 transformation to make this shape with round corners.
body {
background: linear-gradient(lightgreen, green);
min-height: 100vh;
margin: 0;
}
div {
border-radius: 10px;
position: relative;
overflow: hidden;
height: 150px;
margin: 20px;
width: 400px;
}
div:before {
border-radius: 0 0 10px 10px;
transform-origin: 100% 0;
transform: skewY(45deg);
background: tomato;
position: absolute;
width: 45px;
z-index: -1;
content: '';
bottom: -5px;
left: 0;
top: 0;
}
div:after {
border-radius: 0 10px 10px 10px;
background: tomato;
position: absolute;
content: '';
left: 35px;
bottom: 0;
right: 0;
top: 0;
}
<div>
</div>