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
Related
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>
I'd like to draw some kind of triangle in the corner of a div. Because I don't want to use "px" I'd like to achieve the same result also with percentage values.
This is what it should looks like:
.container {
position: absolute;
top: 5%;
left: 5%;
width: 60%;
height: 30%;
background: black;
color: white;
border-radius: 12px;
overflow: hidden;
}
.triangle {
position: relative;
top: 10%;
left: 90%;
width: 10%;
height: 10%;
-webkit-transform: rotate(45deg);
background: green;
}
<div class="container">
<div class="triangle"></div>
</div>
Any help would be very appreciated. Thanks in advance!!
You can use position: absolute on triangle element and set top and right properties to 0.
.container {
position: absolute;
top: 5%;
left: 5%;
width: 60%;
height: 30%;
background: black;
color: white;
border-radius: 12px;
overflow: hidden;
}
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 30px 0;
border-color: transparent #608A32 transparent transparent;
right: 0;
top: 0;
position: absolute;
}
<div class="container">
<div class="triangle"></div>
</div>
You can also just use pseudo-element with absolute position for triangle.
.container {
position: relative;
width: 300px;
height: 70px;
background: black;
border-radius: 12px;
overflow: hidden;
}
.container:after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 30px 0;
border-color: transparent #608A32 transparent transparent;
right: 0;
top: 0;
position: absolute;
}
<div class="container"></div>
Below is another example with triangles in all corners.
.all_triangles_container {
position: relative;
width: 300px;
height: 70px;
background: black;
overflow: hidden;
}
.triangle {
width: 0;
height: 0;
border-style: solid;
position: absolute;
}
.triangle_tl {
border-width: 0 0 30px 30px;
border-color: transparent transparent transparent green;
left: 0;
top: 0;
}
.triangle_tr {
border-width: 0 30px 30px 0;
border-color: transparent red transparent transparent;
right: 0;
top: 0;
}
.triangle_br {
border-width: 30px 30px 0 0;
border-color: transparent yellow transparent transparent;
right: 0;
bottom: 0;
}
.triangle_bl {
border-width: 0 30px 30px 0px;
border-color: transparent transparent purple transparent;
left: 0;
bottom: 0;
}
<div class="all_triangles_container">
<div class="triangle triangle_tl"></div>
<div class="triangle triangle_tr"></div>
<div class="triangle triangle_br"></div>
<div class="triangle triangle_bl"></div>
</div>
You can simply rely on background and create the triangle with a linear-gradient without extra markup and pseudo-element:
.container {
width: 400px;
height: 100px;
background: linear-gradient(-135deg,#608A32 35px,#000 0);
color: white;
border-radius: 12px;
overflow: hidden;
}
<div class="container"></div>
Related: https://stackoverflow.com/a/49696143/8620333
The trick is make a square with position:absolute first and then use top and right position negative values(equal to the half of width of the element) to adjust it and then rotate it using transform
Stack Snippet
.container {
position: absolute;
top: 5%;
left: 5%;
width: 60%;
height: 30%;
background: black;
color: white;
border-radius: 12px;
overflow: hidden;
}
.triangle {
position: absolute;
top: -25px;
right: -25px;
width: 50px;
height: 50px;
transform: rotate(45deg);
background: green;
}
<div class="container">
<div class="triangle"></div>
</div>
Another way to use gradients backgrounds
Stack Snippet
.container {
position: absolute;
top: 5%;
left: 5%;
width: 60%;
height: 30%;
background-image: linear-gradient(45deg, black 92%, green 92%);
color: white;
border-radius: 12px;
}
<div class="container"></div>
Of course you can also have striped background similar to textbox resizers
.button {
position: relative;
width: 150px;
height: 35px;
background: black;
border-radius: 8px;
overflow: hidden;
}
.blue { background: #09f; }
.red { background: #f00; }
.orange { background: #f90; }
.green { background: #0c0; }
.button:after {
content: '';
width: 45px;
height: 14px;
background: repeating-linear-gradient(
0deg,
rgba(255,255,255,.7),
rgba(255,255,255,.7) 2px,
transparent 2px,
transparent 4px
);
border-style: 0px solid;
right: -15px;
bottom: -4px;
position: absolute;
transform: rotate(-45deg);
}
<div class="button"></div>
<div class="button blue"></div>
<div class="button red"></div>
<div class="button orange"></div>
<div class="button green"></div>
If overflow: hidden on the container is not an option you can use the pseudo element's bottom border:
.container:after {
content: '';
position: absolute;
width: 0;
height: 0;
margin: -16px;
border: 10px solid transparent;
border-bottom-color: red;
transform: rotate(-45deg);
}
Adjust margin and border values for your case.
I'm not the greatest at CSS and I'm looking to do something like this:
I have a feeling I need to use ::after and content: ' ' to achieve this along with a border-radius: 50%;
.nav {
position: fixed;
left: 50%;
}
.nav::after {
content: ' Hi ';
background-color: rgba(0, 0, 0, 0.5) !important;
box-shadow: 0px 1px 8px 1px #222222;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
position: fixed;
height: 7.5em;
width: 10em;
transform: translateX(-50%);
transform: translateY(40%);
z-index: 2;
}
<div class="nav"></div>
I don't believe you can use a single HTML Element to achieve this effect. Check this out, though:
#outer {
width: 300px;
height: 225px;
background-color:#ccc;
position: relative;
}
#rounded, #leftbox, #rightbox {
background-color: #000;
opacity: .5;
filter: alpha(opacity=50);
position: absolute;
top: 10px;
}
#rounded {
width: 200px;
height: 200px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
left: 50px;
}
#leftbox, #rightbox {
width: 50px;
height: 100px;
}
#leftbox {
left: 0;
}
#rightbox {
right: 0;
}
<div id='outer'>
<div id='leftbox'></div>
<div id='rounded'></div>
<div id='rightbox'></div>
</div>
Personally, I would use a transparent Image overlay, for backward compatibility, instead of this technique.
.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
Right, I ran into a bit of a problem and not to sure if this can be solved another way.
I need to move the content: "F"; and center it onto the border I have in the top left corner. Now is this possible without creating another element?
HTML:
<div class="userBoxF"></div>
CSS:
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:after {
content: "F";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
font-size: 30px;
}
The only way I can think to do it is to create the corner as a completely separate element so I can put the text "F" into a span (or something) and move it that way.
Demo Here
Note: Nothing here will change size, width and height for both the box and corner will always be the same.
Here is what I want, using the solution i found but would rather not use.
HTML:
<div class="userBoxF">
<div class="corner"><span>F</span></div>
</div>
CSS:
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF .corner {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
font-size: 30px;
}
.userBoxF .corner span {
display: block;
position: absolute;
top: -30px;
left: -20px;
}
Here is a demo of the solution I came up with but I would rather not create anymore elements.
My Solution
You can use :before wit :after together.
I removed the span:
<div class="userBoxF">
</div>
And changed the CSS blocks to this:
.userBoxF:before {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
content: "";
}
.userBoxF:after {
display: block;
position: absolute;
top: 10px;
left: 14px;
content: "F";
font-size: 30px;
}
And here's the updated fiddle
EDIT: Here's an added bonus!
You can jack the "F" from the class, if you want it to be more versatile, if you use CSS's attr inside content. Example:
<div class="userBox" data-l="F">
</div>
And:
.userBox:after {
display: block;
position: absolute;
top: 10px;
left: 14px;
content: "" attr(data-l);
font-size: 30px;
}
And another fiddle
Arguably the "F" is actual content as it's not a styling option...it actually denotes something and, perhaps should be read by a screenreader (for instance) then a span with a gradient (TL - BR) mightbe more appropriate.
JSFiddle Demo
HTML
<div class="userBoxF">
<span class="section-letter">F</span>
</div>
CSS
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.section-letter {
position: absolute;
top: 0;
left: 0;
width:2em;
height:2em;
line-height: 1em;
text-align: left;
padding:0.25em 0 0 0.25em;
font-size: 30px;
background: linear-gradient(135deg, pink 0%, pink 50%, transparent 50%, transparent 100%);
}
Simply use another :psuedo:
Demo Fiddle
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:before,.userBoxF:after{
position: absolute;
top: 0;
left: 0;
}
.userBoxF:before {
content:"";
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
}
.userBoxF:after {
content:attr(data-l);
top: 10px;
left: 10px;
font-size: 30px;
}
From a single pseudo, you can use a gradient as background : DEMO
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:after {
content:"F";
position: absolute;
top: 0;
left: 0;
text-indent:20px;
line-height:60px;
width:80px;
height:80px;
background:linear-gradient(to bottom right, #F385FF 51%, transparent 49%);
font-size: 30px;
}
background-image as gradient can be just an image like in old days :
DEMO: