I need help with this problem
I want to do with css a figure like this:
I want to do a trapeze with a "rounded" protuberance in the middle.
I tried to put a trapeze back with z-index 0 an the other rounded with z-index 1, but i couldn't. Another solution for me was using svg but neither, it complicated me more.
Thanks for your help.
I tried to do this:
<style>
.left {
height: 66px;
background: blue;
float: left;
position: relative;
border-top-right-radius: 19px;
width: 370px;
}
.left:after {
content: '';
position: absolute;
right: -23.5px;
bottom: 0px;
border-top: rgba(255,255,255,0.1) 56px solid;
border-left: 26px solid #0000ff;
width: 0;
z-index: 1;
}
#trapezoid {
border-bottom: 100px solid #0000ff;
border-right: 50px solid transparent;
height: 0;
width: 330px;
}
`
You can use skew transformation like follow:
.box {
height:100px;
margin-right:50px;
position:relative;
z-index:0;
transform:skew(25deg);
transform-origin:bottom left;
}
.box:before {
content:"";
position:absolute;
top:0;
left:0;
right:20px;
bottom:50%;
background:green;
}
.box:after {
content:"";
position:absolute;
top:50%;
left:0;right:0;bottom:0;
background:green;
border-top-right-radius:20px;
}
body {
margin:0;
}
<div class="box"></div>
Reduce the width of trapezoid
.left {
height: 66px;
background: blue;
float: left;
position: relative;
border-top-right-radius: 19px;
width: 370px;
}
.left:after {
content: '';
position: absolute;
right: -23.5px;
bottom: 0px;
border-top: rgba(255,255,255,0.1) 56px solid;
border-left: 26px solid #0000ff;
width: 0;
z-index: 1;
}
#trapezoid {
border-bottom: 80px solid #0000ff;
border-right: 50px solid transparent;
height: 0;
width: 300px;
}
<div id="trapezoid"></div>
<div class="left"></div>
Related
I created a border effect using selectors that shows only on corners as you can see in the following snippet.
html {
box-sizing: border-box !important;
}
*, *:before, *:after {
box-sizing: inherit;
}
.ix-border{
position: relative;
padding: 0;
margin: 0;
border-style: solid;
display: inline-block;
border-width: 1px;
background-color: transparent;
border-color: #A00;
}
.ix-border, .ix-border:hover, .ix-border:before, .ix-border:after{
transition: 0.42s;
}
.ix-border:before, .ix-border:after{
content:'';
position:absolute;
padding: 0;
margin: 0;
border-style: solid;
display: inline-block;
border-width: 1px;
background-color: transparent;
border-color: #FFF;
}
.ix-border:before{
top: 8px; right:-1px; bottom: 8px; left:-1px;
border-width: 0 1px 0 1px;
}
.ix-border:after{
top:-1px; right: 8px; bottom:-1px; left: 8px;
border-width: 1px 0 1px 0;
}
.ix-border:hover{
border-color: #F00;
}
.ix-border:hover:before{
top: 16px; bottom: 16px;
border-width: 0 1px 0 1px;
}
.ix-border:hover:after{
right: 16px; left: 16px;
border-width: 1px 0 1px 0;
}
.elmt{
width: 120px;
height: 60px;
text-align: center;
line-height: 60px;
}
<div class="elmt ix-border">
Hello World
</div>
However, I noticed that when a zoom is performed, the element border, that is supposed to be hidden by the ::before/::after selector borders, is sometimes randomly visible on one or two sides, depending on the zoom factor and the navigator.
I added the box-sizing:border box so that borders are included in zooming calculations, as suggested here but it's still not fixed.
So, am I missing something? Is there any hack to fix it or any other way (css only) to achieve to same effect?
This is really good question but I think it is really hard to do with pseudo elements and CSS only ,so I will suggest an alternative approach with real html elements like this so now you avoid the issue but have an extra html elements :(
.corners {
position: relative;
height: 150px;
padding: 10px;
position: relative;
text-align: center;
width: 150px;
padding: 10px;
line-height:150px;
font-size:16px;
}
.top, .bottom {
position: absolute;
width: 10px;
height: 10px;
}
.top {
top: 0;
border-top: 1px solid;
}
.bottom {
bottom: 0;
border-bottom: 1px solid;
}
.left {
left: 0;
border-left: 1px solid;
transition: all 0.42s;
}
.right {
right: 0;
border-right: 1px solid;
transition: all 0.42s;
}
.corners:hover .right{
width:20px;
height:20px;
border-color:red;
}
.corners:hover .left{
width:20px;
height:20px;
border-color:red;
}
<div class="corners">
<div class="top left"></div>
<div class="top right"></div>
<div class="bottom right"></div>
<div class="bottom left"></div>
content goes here
</div>
Ok here is my another take on the issue this time I am using only 3 html elements
div {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
text-align:center;
line-height: 100px;
}
div div:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -10px;
left: -10px;
border-top: 1px solid #000;
border-left: 1px solid #000;
transition: all 0.42s;
}
div div:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -10px;
right: -10px;
border-top: 1px solid #000;
border-right: 1px solid #000;
transition: all 0.42s;
}
div div {
margin: 0;
position: absolute;
top: 0;
}
span:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: -10px;
left: -10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
transition: all 0.42s;
}
span:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: -10px;
right: -10px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
transition: all 0.42s;
}
div:hover span:after{
width:30px;
height:30px;
border-color:red;
}
div:hover span:before{
width:30px;
height:30px;
border-color:red;
}
div:hover div:before{
width:30px;
height:30px;
border-color:red;
}
div:hover div:after{
width:30px;
height:30px;
border-color:red;
}
<div>some content<div></div><span></span></div>
I am trying to represent my HTML/CSS tab like on the picture.
I have already tried lots of things with border-radius without any success.
Do you have any tracks so that I can reproduce my tabs like the picture only with CSS?
In order to make the same borders (also inside the triangles) as in the image, you can use pseudo elements and transform rotate :
DEMO
output :
HTML :
<div>Critiques</div>
<div>Messages sur le forum</div>
<div>Actualités</div>
CSS :
div{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
padding-right:12px;
line-height:50px;
float:left;
width:200px;
position:relative;
z-index:0;
text-align:center;
}
div:after,div:before{
content:'';
position:absolute;
width:10px;
height:10px;
background:#fff;
z-index:999;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
div:before{
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
top:0; left:-12px;
-ms-transform-origin:100% 0;
-webkit-transform-origin:100% 0;
transform-origin:100% 0;
}
div:after{
border-left:1px solid #ccc;
border-top:1px solid #ccc;
bottom:0;
right:4px;
-ms-transform-origin:0 100%;
-webkit-transform-origin:0 100%;
transform-origin:0 100%;
}
div:first-child:before, div:last-child:after{
display:none;
}
You could that with css only but with an empty span (If you would like to have half triangles in the edges):
HTML
<ul>
<li><span></span>one</li>
<li><span></span>two</li>
<li><span></span>three</li>
</ul>
CSS
ul {
font-size: 0;
}
li {
background: red;
display: inline-block;
padding: 30px;
font-size: 15px;
position: relative;
}
span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
li:after {
width: 0;
height: 0;
border-top: 10px solid white;
border-left: 10px solid transparent;
position: absolute;
right: 0;
top: 0;
content: "";
}
li:before {
width: 0;
height: 0;
border-top: 10px solid white;
border-right: 10px solid transparent;
position: absolute;
left: 0;
top: 0;
content: "";
}
span:before {
width: 0;
height: 0;
border-bottom: 10px solid white;
border-right: 10px solid transparent;
position: absolute;
left: 0;
bottom: 0;
content: "";
}
span:after {
width: 0;
height: 0;
border-bottom: 10px solid white;
border-left: 10px solid transparent;
position: absolute;
right: 0;
bottom: 0;
content: "";
}
An example: http://jsfiddle.net/fC9Fs/
Here is another take on it:
This one works with a basic list and no other HTML is needed.
Also as you've shown in your image, the first and last elements do not have the arrow.
Fiddle
HTML:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
CSS:
html, body{
background:#E5E2E2;
}
ul{
display:inline-block;
list-style-type:none;
border:1px solid #CCCCCC;
padding:0;
}
li{
float:left;
padding:10px 15px;
background:#F4F4F4;
position:relative;
}
li:nth-child(n+2):before{
content:'';
position:absolute;
left:-5px;
top:-1px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #e5e2e2;
}
li:nth-child(n+2):after{
content:'';
position:absolute;
left:-5px;
bottom:-1px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #e5e2e2;
}
You can do this with an octagon shape, as shown in this link.
The relevant code:
#octagon { width: 100px; height: 100px; background: red; position: relative; }
#octagon:before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; } #octagon:after { content: ""; position: absolute; bottom: 0; left: 0; border-top: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; }
You can edit the borders from the above code to get the exact shape you want.
I come with another pseudo options that allows to cut corners and allow to see main background behind: DEMO
Borders can be done too : DEMO with borders
The method is to draw background-color from box-shadow on rotated pseudo-elements wich basic border triangle cannot achieve. Pseudo element can take almost any shapes from radius and transform ... if that gives some ideas :)
This question already has answers here:
Aligning css arrow boxes
(6 answers)
Closed 8 years ago.
Hello i would like to style the borders of my list element so that the border-top-right and the border-bottom-right meet in a triangular shape with only css.
like so:
or like so:
I want to achieve both of these two shapes using css alone, to maybe alter the borders to that shape, i would like to know if that is possible and how i can go about it. The element in question is a list element.
If you're after that specific shape, you can use the :before and :after pseudo elements
Demo Fiddle (second shape)
HTML
<div></div>
CSS
div {
display:inline-block;
position:relative;
height:30px;
width:50px;
background:Red;
}
div:before, div:after {
content:'';
position:absolute;
display:inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 26.0px;
}
div:after {
border-color: transparent transparent transparent red;
right:-26px;
}
div:before {
border-color: transparent transparent transparent white;
}
code for your shapes:-
#breadcrumbs-two{
overflow: hidden;
width: 100%;
}
#breadcrumbs-two li{
float: left;
margin: 0 .5em 0 1em;
}
#breadcrumbs-two a{
background: #ddd;
padding: .7em 1em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
position: relative;
}
#breadcrumbs-two a:hover{
background: #99db76;
}
#breadcrumbs-two a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #ddd #ddd #ddd transparent;
left: -1em;
}
#breadcrumbs-two a:hover::before{
border-color: #99db76 #99db76 #99db76 transparent;
}
#breadcrumbs-two a::after{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #ddd;
right: -1em;
}
#breadcrumbs-two a:hover::after{
border-left-color: #99db76;
}
#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-two .current::after,
#breadcrumbs-two .current::before{
content: normal;
}
DEMO
div {
background: #EF3E36;
margin: 10px;
}
.arrow1 {
position: relative;
left: 50px;
width: 250px; height: 100px;
}
.arrow1:before {
display: block;
content: "";
width: 0;
height: 0;
position: absolute;
left: -50px;
border: 50px solid #EF3E36;
border-left: 50px solid transparent;
border-right: 0;
}
.arrow1:after {
display: block;
content: "";
background: transparent;
width: 0;
height: 0;
position: absolute;
left: 250px;
border: 50px solid transparent;
border-left: 50px solid #EF3E36;
}
.arrow2 {
position: relative;
width: 300px; height: 100px;
}
.arrow2:after {
display: block;
content: "";
background: transparent;
width: 0;
height: 0;
position: absolute;
left: 300px;
border: 50px solid transparent;
border-left: 50px solid #EF3E36;
}
I would like to create this using only CSS. Is this possible? If so, can you guys help me out?
Fairly easy with borders and a pseudo element:
ALL
#button::after {
content: "";
border: 64px solid transparent;
border-top: 12px solid orange;
position: absolute;
top: 29px;
left: 0;
}
DEMO
Try to experiment with this basic button:
.btn {
width: 100px;
height: 30px;
text-align: center;
border: 0;
}
.btn-arrow {
position: relative;
background: coral;
}
.btn-arrow:after {
border: solid transparent;
content:"";
position: absolute;
border-top-color: coral;
border-width: 16px 50px;
left: 0px;
top: 100%;
margin-top: 0px;
}
http://jsfiddle.net/dfsq/tNjCb/1/
how about something like the following:
http://jsfiddle.net/WDCu3/
<div id="test">Testing</div>
<div id="arrow"></div>
#test {background-color:red; width:100px;}
div {text-align:center;}
#arrow {
border-top: 15px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width:0;
}
I'm trying to reproduce this image using only css
I've played with the radius property but as you will see I don't get the same angle effect.
.shape{
background-color: black;
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
color:white;
font-weight:bold;
padding: 30px 30px 30px 50px;
text-align:center;
position:absolute;
right:0;
bottom:0;
z-index:1003;
font-size: 20px;
border-top-left-radius: 125px;
-moz-border-radius-topright: 125px;
}
You can see what I've tried at http://jsfiddle.net/ymorin007/7qX4U/
Thanks.
Might not be cross-browser compatible, but this'll get you close :)
.shape{
background-color: black;
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
color:white;
font-weight:bold;
padding: 30px 30px 30px 50px;
text-align:center;
position:absolute;
right:0;
bottom:0;
z-index:1003;
font-size: 20px;
border-top-left-radius: 125px;
-moz-border-radius-topright: 125px;
}
.shape::before{
content:"";
width:0;
height:0;
position:absolute;
left:-34px;
border-left: 53px solid transparent;
border-right: 53px solid transparent;
border-bottom: 53px solid black;
}
fiddle: http://jsfiddle.net/pggRb/
If you needed to hit test, you may want to consider using a skewed pseudo element:
div {
position: fixed;
bottom: 0;
right: 0;
height: 50px;
width: 200px;
background: gray;
cursor: pointer;
transition: all 0.6s;
}
div:before {
content: "";
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background: inherit;
transform: skewX(-45deg);
border-radius: 20px 0 0 0;
z-index: -1;
}
div:hover {
background: tomato;
]
<div>SOME TEXT</div>