I've seen all kinds of shapes from tvs to eggs to simple triangles. But how would one make a hyperbolic shape, filled in similar to this nuclear tower shape?
How about using a border-radius with :before and :after pseudo elements?
Demo
Here am using a wrapper element with a class - .wrap and than am nesting a child element with a class - .object, now I will break up the selectors explanation for you, first, am assigning position: relative; for the parent element so that the absolute positioned child elements don't fly out in the wild.. second is I am using an element with overflow: hidden; which is important so that the rounded pseudo elements are hidden..
And at last, I use :before and :after pseudo elements and position them using absolute, and than we have to set it correctly using top, left, right properties respectively.
<div class="wrap">
<div class="object"></div>
</div>
.wrap {
position:relative;
}
.object {
margin: 100px;
position: relative;
overflow: hidden;
background: #fafafa;
width: 180px;
height: 215px;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
}
.object:before,
.object:after {
content: "";
background: #fff;
position: absolute;
top: -53px;
width: 300px;
height: 320px;
border-radius: 300px;
}
.object:before {
left: -263px;
border-right: 1px solid #aaa;
}
.object:after {
right: -263px;
border-left: 1px solid #aaa;
}
Related
This question already has answers here:
Hover and click on CSS triangle
(4 answers)
Closed 7 years ago.
I am in quite the quandary! I would like to add cursor: pointer to my CSS, but the problem is it is a triangle. If I used the following:
#triangleholder {
width: 100px;
height: 100px;
border: 1px solid red;
}
#triangle {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 50px solid blue;
cursor: pointer;
}
<div id="triangleholder">
<div id="triangle">
</div>
</div>
The whole triangle and everything around it has the "Cursor" affect, how can I make only the triangle have the hover affect?
This can be done with pure CSS if we construct the triangle using transforms and overflow:hidden
FIDDLE
#triangleholder {
width: 100px;
height: 100px;
border: 1px solid red;
}
#triangle {
position: relative;
height: 50px;
overflow: hidden;
}
#triangle:before {
content: '';
position: absolute;
width: 71px; /*using pythagorus: sqrt( (100^2) /2 ) */
height: 71px;
background: blue;
transform: rotate(45deg)translateX(29%);
cursor: pointer;
}
<div id="triangleholder">
<div id="triangle">
</div>
</div>
NB: The code: translateX(29%) is used to place the rotated blue square back into the center of the container after it is rotated. This value seems to be constant even if we change the dimensions of the container (FIDDLE)
Use SVG or CSS3 to draw the arrow. Give that element cursor: pointer give the div wrapper non-cursor
Relevant article to implement this: http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/
You could mask the non-triangle areas with pseudo elements, with cursor: default set on them. You'd need to add overflow: hidden to the wrapping element to contain the masks, and of course it relies on the background being a flat colour and the shape you want to mask being a perfect triangle. Not massively extensible and a bit hacky, but it gets the specific result you're after.
#triangleholder {
// ..
overflow: hidden;
}
#triangle {
// ..
position: relative;
}
#triangle:before, #triangle:after {
content: "";
display: block;
position: absolute;
background: white;
width: 100px;
height: 50px;
top: -10px;
cursor: default;
}
#triangle:before {
transform: rotate(-45deg);
right: 0;
}
#triangle:after {
transform: rotate(45deg);
left: 0;
}
I'm trying to mockup this design:
But, I can't render the red border correctly. I tried with the obvious solution:
border: 1px solid #939393;
border-left: 4px solid red;
But It's affected by the top and bottom borders, leaving the red stripe with diagonal corners, as you can see in this fiddle:
http://jsfiddle.net/anp0e03k/
Is there any way correct way to fix this?
The only thing that I can think is to add a div inside with red background and negative margins on top and bottom, but it seems to be an overkill and would love to find something that doesn't ruins the html semantic.
Apply the left border to a :before pseudo element of the div and remove the divs left border.
Compatibility: All modern browsers and IE8 +
Give the :before
height: 100% to span the entire height of your div
margin-top: -1px to overlap the top border
padding-bottom: 2px to overlap the bottom border
Then use either
position: absolute on the :before with position: relative on the div like this example:
body {
background-color: #c2c2c2;
}
div {
margin: 50px;
background-color: #FFF;
border: 1px solid #939393;
height: 50px;
width: 200px;
border-left: none;
position: relative;
}
div:before {
content: '';
display: block;
border-left: 4px solid red;
height: 100%;
margin-top: -1px;
padding-bottom: 2px;
position: absolute;
top: 0;
left: 0;
}
<div>
</div>
or
display: inline-block for the :before like this example:
Note: You will probably want to use vertical-align: top / middle / bottom for the :before. This example uses the value top.
body {
background-color: #c2c2c2;
}
div {
margin: 50px;
background-color: #FFF;
border: 1px solid #939393;
height: 50px;
width: 200px;
border-left: none;
}
div:before {
content: '';
display: inline-block;
border-left: 4px solid red;
height: 100%;
margin-top: -1px;
padding-bottom: 2px;
vertical-align: top;
}
<div>
There is text in this
</div>
Final result
I am trying to get this done in HTML and CSS. I am able to get the box done using the border and padding. But how do I get the line above?
Here is what I have so far:
.november {
padding: 1%;
border: 2px solid #000;
}
<div class="november">November 2014</div>
Pseudo element goodness
The HTML
It's a one liner:
<div>November 2014</div>
The CSS
The vertical line is created with a :before pseudo element:
The :before pseudo element is given position: absolute
left: 50% shifts the line to the middle and bottom: 100% pops the line above the div
The line is created by the 2px width
margin-left: -2px shifts the line 2px to the left to correctly offset its position (this is equal to the width)
The div is made position: relative and the position: absolute :before will position itself in relation to it. Space above the div is created with the top margin.
Complete Example
In this example, display: inline-block allows the div to expand and retract with its contents.
div {
padding: 10px;
border: solid 2px #000;
display: inline-block;
position: relative;
margin-top: 50px;
}
div:before {
content: '';
width: 2px;
height: 50px;
background: #000;
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -2px;
}
<div>November 2014</div>
I tried this and got it right:
body {
background: #EEE;
}
.november {
margin: 0;
padding: 1%;
border: 2px solid white;
clear: both;
}
<div class="col-sm-2">
<hr style="width: 2px; border-top: 50px solid white; padding: 0; text-align: center; margin: auto;" />
<div class="november">November 2014</div>
</div>
I got with image as a background, and want to get effect of multiple inner outlines.
Outlines should be solid white 2px, but in different position - say -4px, -8px, -12px.
Goal is to get more than 2 outlines.
I know i can make box-shadow and outline to get double outilne, but noticed that i cannot attach to div 3 classes with different outline-offset - div have applied only last of class.
My code:
<div class="imgfield effect1 effect2 effect3"> </div>
and example css:
.imgfield { background: url(someimage.jpg); ... width, height etc. }
.effect1 { outline: yellow 2px solid; outline-offset: -4px; }
.effect2 { outline: red 2px solid; outline-offset: -8px; }
.effect3 { outline: blue 2px solid; outline-offset: -12px; }
In this example there will be only blue inner outline but now red niether yellow. How to workaround this?
-----------edit-----------------
All answers are good. I must admit i try handling after and before but i'm not enough familiar with it. Box-sizing: border-box was also important.
to complete #Mr.Alien demo/answer , i would use border's pseudo for a better compatibility.
.effect {
height: 200px;
width: 200px;
outline: 1px solid #000;
position:relative;/* pick as reference for pseudo absolute */
-moz-box-sizing:border-box; /* keep box within size given */
box-sizing:border-box;
}
/* size pseudo within from coordonates */
.effect:before {
content:"";
top:2px;
left:2px;
right:2px;
bottom:2px;
border: green 2px solid;
position: absolute;
}
.effect:after {
content:"";
top:6px;
left:6px;
right:6px;
bottom:6px;
border: red 2px solid;
position: absolute;
}
DEMO
How about using pseudo elements for this? Here, I am using a single class with a single element, but am positioning the pseudo elements i.e :before and :after using position: absolute;.
Demo
You can surely play with z-index if you have any issue with the element overlapping.
.effect {
height: 200px;
width: 200px;
outline: 1px solid #000;
}
.effect:before {
content: "";
height: 200px;
width: 200px;
outline: green 2px solid;
outline-offset: -4px;
display: block;
position: absolute;
}
.effect:after {
content: "";
display: block;
height: 200px;
width: 200px;
outline: red 2px solid;
outline-offset: -8px;
position: absolute;
}
I want to create two trapezoids in css.I can not use the border color because I want to give shapes background-image. Everything should explain the picture. In both div will put i some text.
Can I use html, css, js, svg just do not know how.
http://iv.pl/images/82062332573614452824.jpg http://iv.pl/images/32788252576166741527.jpg
You can achieve this in pure CSS through the usage of the :after pseudo element.
Basically, I created two rectangles. Then I overlayed a triangle on the right rectangle which was added via the :after pseudo element.
jsFiddle example - looks the same
HTML
<div id="wrap">
<div id="one"></div>
<div id="two"></div>
</div>
CSS
div {
float: left;
position: relative;
height: 100px;
}
#one {
background: green;
width: 130px;
}
#two {
background: red;
width: 70px;
}
#two:after {
content: "\A";
border-top: 100px solid transparent;
border-bottom: 60px solid transparent;
border-right: 45px solid red;
position: absolute;
left: -45px;
}
#wrap {
overflow: hidden;
}