I have 2 div's here,using css pseudo elements am drawing shapes.
both are having same proprties except position property of the pseudo elements , how can the shapes are differing in both the cases.
#withpos:after{
border-top: 100px solid red;
border-left: 100px solid red;
content: "";
position: absolute;
border-right: 100px solid green;
border-bottom: 100px solid green;
width: 0px;
}
#withoutpos:after{
border-top: 100px solid red;
border-left: 100px solid red;
content: "";
border-right: 100px solid green;
border-bottom: 100px solid green;
width: 0px;
}
#withoutpos{
margin-left:250px;
margin-top:100px;
}|
<div id="withpos"></div>
<div id="withoutpos"></div>
That additional form in the #withoutpos square is due an empty line of text, brought by content:"".
This is visible when inspecting the element:
The after element isn't absolutely positioned so it's push by the flow (this "square" is taller than the other).
As #talya-s says, font-size: 0 will fix it, and strangely height: 0 don't, except if you actually put some text (which makes no sense, of course).
Related
I am wanting to create inline-block divs in CSS that have diagonal sides by having a top width of lets say 200px and a bottom width of 100px. Is this possible? If so, how? Or what would anyone suggest as a better alternative?
The box model of HTML implies that divs are always rectangles. However you can get a very decent result using some techniques. The simplest one is too use css to tint just the part of your background needed. You set the width to the wider side and then use the border-left right and bottom properties to adjust the shape. For example:
.myDiv {
border-bottom: 50px solid #555;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 125px;
}
You can see it working here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_trapezoid
The w3school also have a very interesting page with a lot of shapes you can create with css. Check it here: https://www.w3schools.com/howto/howto_css_shapes.asp
Are you looking to create a trapezoid?
.trapezoid {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
.trapezoid {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
<div class="trapezoid">
</div>
I want to ask how can i create a css arrow triangle with smooth sides i.e. no cut in the side of arrow without using any image? I have already tried the tutorial -
[http://css-tricks.com/snippets/css/css-triangle/][1]
.arrow_up
{
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
position:absolute;
top:75px;
left:250px;
}
<div class="arrow_up"></div>
UPDATE
Sorry, the issue was found only in some older version of Firefox.
You need to use a pseudo element and rotate it:
DEMO
CSS:
.arrow_up
{
width: 100px;
height: 50px;
position:absolute;
top:150px;
left:250px;
overflow:hidden;/* hide part of the pseudo overflowing*/
}
.arrow_up:before {
content:'';
position:absolute;
width:100%;
padding-top:100%;/* it will draw a square , change this value for other degrees angles*/
transform:rotate(45deg);/* we'll see a corner */
background:black;
top:20px;/* tune this according to size of parent or size to be seen */
}
Do not forget to add vendor-prefix or use a script that adds them automaticly.
The use o a pseudo element allows to add content in the box : ie. http://codepen.io/gc-nomade/pen/gdoGA
The only thing I can possibly think of is that you have another element on the page which is slightly overlapping onto the arrow as when tested it works fine:
http://jsfiddle.net/Hive7/qLAg4/
.arrow_up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid black;
position: absolute;
top: 75px;
left: 250px;
}
It could be something to do with your browser as well though
I found a code drawing a 6-point star:
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
now I need to place this picture inside the Button element.
should look like a real button with 6-point start on the left side.
|*Button| Like this :)
Try including a div inside of a tag - something like this code here:
<button onclick="sayHello();"><div id="star-six"> </div></button>
http://jsfiddle.net/53mHn/
Updated:
If you want the star on the left, create two divs inside of your button, one for the star and one for your text. Set the width of the star div to be 50px (or whatever the star width is) and set the float: to left.
<button onclick="sayHello();"><div class="star-content star-icon" id="star-six"> </div><div class="star-content">This is the text inside of my button</div></button>
Css is here:
.star-icon {
width: 50px;
float: left;
}
I have 4 float: left div containers like so...
I want to display a border when a div is hovered over. However, when I hover over the first or second div, it pushes the bottom div to the left...
I tried adding margin and padding to the div's, but nothing seemed to work.
.div
{
width: 33%;
}
.div:hover
{
boder: solid 1px #EEE;
}
Use a backround coloured or transparent border on the initial state and the size of the box won't change.
.div {
width: 32%; // (33% + 1px border) * 3 = likely more than the width of the container
border: solid 1px transparent;
}
.div:hover {
boder: solid 1px #EEE;
}
One solution is to have a border all of the time, but make it the same color as the background when not hovered.
For example:
.div
{
width: 33%;
border: solid 1px #FFF;
}
.div:hover
{
border: solid 1px #EEE;
}
EDIT: Alternatively if an invisible border won't work (gradient background, etc.) you can add 1px padding when not hovered and make it 0px padding when hovered.
For example:
.div
{
width: 33%;
padding: 1px;
}
.div:hover
{
border: solid 1px #EEE;
padding: 0;
}
How do I cut the shared border line between these two divs? I want the top small div to have border on three sides expect bottom and the larder div below that to have only top border but leaving the shared border. So it will look like a line running across both divs upper borders.
I tried overlaying top div on the bottom. But Not getting what I want.
.ihead {
background-color: #EEE;
width: 15em;
height: 3em;
text-align:center center;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:none;
}
.ibody {
background-color: #EEE;
width: 60em;
height:20em;
margin-top:3em;
border-top:1px solid black;
z-index: 10;
}
<div class="ihead"><h>Hello !</h></div>
<div class="ibody">......</div>
From -
To -
The normal way you'd achieve this effect is to have the box on top move down over the top of it's border. In your example, you can achieve this by adding position: relative; bottom: -1px to your .ihead class and removing the margin-top: 3em from your .ibody class.
See the jsFiddle.
.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
border-left: none;
}
<div class="bordered"><h1>Test1</h1></div>
<div class="bordered"><h1>Test2</h1></div>
<div class="bordered"><h1>Test3</h1></div>
This question was the first that popped up for me so i felt it was best if i answered it properly unlike the accepted answer above.
Using css:
.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
border-left: none;
}