Following Situation:
I try to make a Triangle, stick to the left side of my Website
.right_5 {
margin-top: 0px;
border-top: 350px solid transparent;
border-bottom: 380px solid transparent;
border-left: 350px solid black;
z-index: 2;
}
<div class="right_5"></div>
And this is the Code, BUT
How do I Make it 100% of the left side? so that the top of the triangle points to the middle of the website?
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'm using tooltipster with custom styling. But I need the arrow to be bigger (30px in stead of default 7/8px). But when I create the custom css the arrows look great, but the position of the tooltip is wrong and overlaps the hotspot. (still based on the original 'small' arrow).
I styled the arrows by overriding the .tooltipster-arrow-left/right span with:
.tooltipster-arrow-left span {
border-top: 30px solid transparent !important;
border-bottom: 30px solid transparent !important;
border-left: 30px solid;
top: 50%;
margin-top: -30px;
right: -30px;
}
.tooltipster-arrow-right span {
border-top: 30px solid transparent !important;
border-bottom: 30px solid transparent !important;
border-right: 30px solid;
top: 50%;
margin-top: -30px;
left: -30px;
}
Is there a way to tell tooltipster what the size of the arrow will be?
Or can I set an offset?
I tried adding a margin to the .tooltipster-base, but this doesn't work well. It only works for either left positioned tooltip or right positioned tooltip and not for both.
Thanks for your help.
Use Tooltipster v4 (experimental) on the v4 branch of the project and you will be able to change the size of the arrow. Some of the packaged themes change the size of the arrow of the default style, see how it's done there.
I used this css style for my themed tooltipster to increase arrow size for top and bottom align
.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
border-left: 12px solid transparent !important;
border-right: 12px solid transparent !important;
border-top: 12px solid;
bottom: -12px;
}
.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
border-bottom: 12px solid;
border-left: 12px solid transparent !important;
border-right: 12px solid transparent !important;
top: -12px;
}
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 6 years ago.
I have seen several examples of "CSS arrows" - basically, an arrow/triangle, done in pure CSS. Examples here:
https://css-tricks.com/snippets/css/css-triangle/
http://cssarrowplease.com/
http://apps.eky.hk/css-triangle-generator/
...and so on.
However, no matter how much I look into them, I have no idea how does it actually work and why is an arrow generated.
Take this small example, adapted from the first link:
.arrow-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid black;
}
<div class="arrow-up"></div>
Why does transparent left and right border produce arrow up? What is going on?
How do you draw a 50px border around a 0x0 square?
By making a 100x100 square.
#########
#########
#########
#########
#########
But, how do you control all four edges independently?
By cutting the square into 4 triangles. Each triangle is one complete segment of border, but because the border is 50px thick, it is actually composed of four different wedges of solid border:
#########
# ##### #
### # ###
#### ####
### # ###
# ##### #
#########
Now, make the top, left and right triangles transparent and you're left with just the bottom border, which forms and upwards-pointing triangle.
#
#####
#########
You're left with a triangle pointing upwards, in the color of the bottom border.
Here's a demonstration using a progressively larger and larger border width:
div {
margin: 10px;
}
#one {
width: 90px;
height: 90px;
border-top: 5px solid blue;
border-left: 5px solid red;
border-right: 5px solid green;
border-bottom: 5px solid black;
}
#two {
width: 50px;
height: 50px;
border-top: 25px solid blue;
border-left: 25px solid red;
border-right: 25px solid green;
border-bottom: 25px solid black;
}
#three {
width: 0;
height: 0;
border-top: 50px solid blue;
border-left: 50px solid red;
border-right: 50px solid green;
border-bottom: 50px solid black;
}
#four {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid black;
}
<p>First, lets make a box, 100x100px. We'll use a 5px border, and a 90x90px content area.</p>
<div id="one"></div>
<p>Next, lets make the box smaller, but make the borders bigger. You should start to see how the four borders are controlled independly. We'll use a 50x50px box and a 25px border.</p>
<div id="two"></div>
<p>Now we'll shrink the box down to 0x0, with a 50px border on all edges. Now, there is no box, only border. It's now quite obvious that, as the border grows and the content shrinks, the border is cut along the corners at a 45 degree angle.</p>
<div id="three"></div>
<p>Finally, if we make the top, left and right borders transparent, ony the lower triangle making up the bottom border is left.</p>
<div id="four"></div>
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).
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;
}