I am trying to do this shape with css3:
Is it possible with css3 or good idea to keep it as a background image. If I make it with background images, is there any problem with making it responsive?
I tried with before and after elements, but couldn't get it working:
#shape {
border-left: 70px solid transparent;
border-top: 70px solid #ffde00;
border-right: 70px solid #ffde00;
border-bottom: 70px solid #ffde00;
}
#shape2 {
border-left: 70px solid transparent;
border-top: 70px solid #ffde00;
border-right: 70px solid #ffde00;
border-bottom: 70px solid #ffde00;
position: relative;
}
#shape2 h2 {
text-align: center;
background: #ffde00;
padding: 20px;
margin: 0px 0px 0px 0px;
border-radius: 5px 0px 0px 5px;
}
.title {
position: absolute;
top: 200px;
left: 90px;
color: #fff;
}
<div id="shape"></div>
</br>
<div id="shape2"></div>
<div class="title">
<h2> New Title ,</h2>
</div>
Here is a sample of how to do this shape with CSS3:
#shape {
border-left: 70px solid transparent;
border-top: 70px solid #ffde00;
border-right: 70px solid #ffde00;
border-bottom: 70px solid #ffde00;
}
<div id="shape"></div>
Regards
Related
So I have to do tabs and I done them by creating triangles with pseudo-elements that were made with the help of borders and applied a filter: drop-shadow to them to show borders to border. In 100% zoom, everything is fine, but if you zooming out it, the borders with pseudo-elements disappers, and if you zooming in it, they collapse. What can you advise to solve this problem?
.tab {
display: flex;
font-size: 14px;
align-items: center;
position: relative;
margin-left: 40px;
height: 34px;
bottom: -6px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: #f0f0f0;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
.tab:before {
content: '';
left: -14px;
position: absolute;
border: 31px solid transparent;
border-bottom: 0px solid transparent;
border-right: 0px solid transparent;
border-left: 14px solid #f0f0f0;
bottom: 0;
filter: drop-shadow(1px 0px 0px black);
transform: rotateY(180deg);
transform-origin: bottom;
}
.tab:after {
content: '';
right: -14px;
position: absolute;
border: 31px solid transparent;
border-bottom: 0px solid transparent;
border-right: 0px solid transparent;
border-left: 14px solid #f0f0f0;
bottom: 0;
filter: drop-shadow(1px 0px 0px black);
}
<div class="tab"><a>tab1</a></div>
Link to fiddle: https://jsfiddle.net/Lkehqg0j/12
I want to increase the width & height of the svg slope.
Here is my code.
[https://codepen.io/hetal001/pen/pZWRYz][1]
if you write this code you must know how to make this shape bigger
but for this arrow I suggest to use this code :
div {
margin-top:20px;
}
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
it's very simple to customize
I have the following, where I am creating a triangle (that looks like it has a border) with css.
I want to create another triangle, exactly the same, but about 50px to the right of the 1st one.
How would you do these 2 :before's :after's ???
JSfiddle Here
HTML
<div class="section-modules">
<div class="my-account">
<div class="section-module-light">
<h3>Register Here</h3>
<p>It’s quick and easy and you’ll be the first to know about new bits we release.</p>Register Now
</div>
</div>
</div>
CSS
.section-module-light:after,
.section-module-light:before {
content: '';
position: absolute;
}
/* Styling block element */
.my-account .section-module-light {
position: relative;
margin-bottom: 2em;
padding: 1em;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background-color: transparent;
color: #444;
}
/* Stroke */
.my-account .section-module-light:before {
bottom: -0px;
left: 150px;
border-width: 36px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ccc;
}
/* Fill */
.my-account .section-module-light:after {
bottom: -1px;
left: 150px;
border-width: 34px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
}
JSfiddle Here
you do not need to create the triangle with separate stroke and fill, use css3 transform rotate. Then you can use before for one triangle and after for the second one.
display: block;
width: 34px;
height: 34px;
transform: rotate(45deg);
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
background: white;
see the whole code here: http://jsfiddle.net/07jfLdwL/
You can use CSS3 transform rotate properties. See documentations.
I have a little issue.
I need to get image like bellow but can't set arrow as I want but I think that I am close :)
http://jsfiddle.net/LDhLv/
.d:after {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 95%;
left: 100px;
border-left: 10px solid #666;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-top: 0px solid transparent;
}
Try this:
CSS:
.d{border:1px solid #666; background: #fff; width:100px; height:50px; margin:60px;position:relative}
.d:before, .d:after{
content: "";
position:absolute;
width: 0;
height: 0;
}
.d:before {
top: -10px;
right: -1px;
border-bottom: 10px solid #666;
border-left: 10px solid transparent;
}
.d:after {
top: -8px;
right: 0px;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
}
JSFiddle
I've tweaked the top/bottom left/right positioning for a more stable position, relative to the parent element. Also, I created the arrow in such a way that no rotation is necessary.
You need to use the right border and the rest is just position
.d:after {
content: "";
position:absolute;
width: 0;
height: 0;
bottom: 40px;
left:80px;
border-left: 10px solid transparent;
border-right: 10px solid #666;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
See modified JSFiddle
Change border-left: 10px solid #666 to border-left: 10px solid transparent.. and border-top: 0px solid transparent to border-top: 10px solid transparent.
To change shape of the triangle, set 0px on border-right or just remove it completely.
jsFiddle example
.d:after {
content: "\A";
position:absolute;
bottom: 50px;
left: 90px;
border-bottom: 10px solid #666;
border-left: 10px solid transparent;
border-top: 10px solid transparent;
}
Like it's said in title, does someone know the trick to make the triangles with CSS2 (not CSS3) without using images ?
A little request on a good website will give your answer :
http://css-tricks.com/snippets/css/css-triangle/
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>