I have this triangle:
When browser gets smaller it is cropped this way:
I would like it to crop from both left and right, so the text would still be viewable.
Markup:
echo '<div class="triangle"><p class="season">SEASON '.substr($patch_array[$x][0],0,1).'</p></div>';
CSS:
.season{
font-size: 16px;
text-align: center;
top: -35px;
left: -60px;
position: relative;
width: 113px;
margin: 0px;
padding: 0px;
color: white;
}
.triangle{
width: 0;
height: 0;
clear: both;
margin-left: auto;
margin-right: auto;
border-left: 300px solid transparent;
border-right: 300px solid transparent;
border-top: 45px solid #6699ff;
}
The idea is to set the container to relative position, then draw the shape with pseudo element, and set both the shape and text as absolute position and always stay centered.
Also made a some small improvement - changed left and right border style to outset, it does the trick to make lines look much smoother on Firefox.
Try the demo, resize the output frame, and see how the shape and text always stay in the center.
JsFiddle Demo
.triangle {
text-align: center;
position: relative;
}
.triangle:before {
width: 0;
height: 0;
border-left: 300px outset transparent;
border-right: 300px outset transparent;
border-top: 45px solid #6699ff;
content: "";
display: inline-block;
position: absolute;
left: 50%;
margin-left: -300px;
}
.season {
position: absolute;
width: 100%;
text-align: center;
color: white;
margin: 10px 0;
}
<div class="triangle">
<p class="season">Hello World</p>
</div>
Related
I am successfully achieving my goal but in so doing the divs stick outside the normal area and require scrolling. How can I achieve this sort of masking while keeping everything contained horizontally. I've tried altering the position of various elements and can't seem to achieve this goal. *Note the colors are only there for reference, in the end the red/blue/green divs would be white.
https://jsfiddle.net/xevsz81c/
#leftDivider {
width: 50%;
height: 50px;
background:red;
float: left;
position: absolute;
left: -50px;
}
#leftDivider div{
bottom: 0px;
height: 0px;
border-style: solid;
border-width: 50px 0 0 60px;
border-color: transparent transparent transparent green;
float: left;
position: relative;
left: 100%;
}
#rightDivider {
width: 50%;
height: 50px;
background: blue;
float: right;
position: absolute;
right: -50px;
}
#rightDivider div{
bottom: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 50px 60px;
border-color: transparent transparent green transparent;
float: right;
position: relative;
right: 100%;
}
.divider {
position: absolute;
bottom: 50px;
right: 0;
left: 0;
}
.row {background: orange; position: relative; height: 300px; padding: 0; margin: 0;}
html, body {margin: 0; padding: 0;}
<div class="row">
This div has a background image
<div class="divider"><div id="leftDivider"><div></div></div></div>
<div class="divider"><div id="rightDivider"><div></div></div></div>
</div>
I am having a difficult time recreating the issue in your fiddle, might be a lack of the image within the orange div. But try the following:
You would have to utilize the overflow: hidden property.
By doing this you hide the extra and disable the scrolling which sounds like what you need and are experiencing.
See the explanation here as well as its uses.
I want to create a div with an image and text in it that looks like this.
I've managed to get something that looks like this here:
JSFiddle of pointed div
.triangle-down {
background: white;
display: inline-block;
height: 125px;
margin-left: 20px;
margin-bottom: 55px;
position: relative;
width: 200px;
cursor: pointer;
border: red solid 2px;
}
img {
margin: 10px;
}
.triangle-down:before {
border-top: 20px solid red;
border-left: 101px solid transparent;
border-right: 101px solid transparent;
content: "";
height: 0;
left: -1px;
position: absolute;
top: 127px;
width: 0;
}
.triangle-down:after {
border-top: 20px solid white;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: 125px;
width: 0;
}
<div class="triangle-down">
<img src="http://placehold.it/180x105">
</div>
The issues I have are:
(1) The curser turns to a pointer outside the shape when it crosses the transparent borders that help create the point. I'd prefer it if the pointer appeared only when inside the visible outline of the shape.
(2) Is there a better way of doing this? I looked at trying to rotate a div to create the point as I thought this would solve the pointer issue but I can't work out how to create an isosceles triangle shape with the correct proportions this way. This would also allow me to apply a border to create the outline rather than overlay two triangles as I have in the JSFiddle. See this post for more on this - Speech bubble with arrow
Here is a version using transform: rotate
/*Down pointing*/
.triangle-down {
background: white;
display: inline-block;
height: 125px;
margin-left: 20px;
margin-bottom: 55px;
position: relative;
width: 200px;
cursor: pointer;
border: red solid 2px;
}
img {
position: relative;
margin: 10px;
z-index: 1
}
.triangle-down:before,
.triangle-down:after {
border-bottom: 2px solid red;
background: white;
content: '';
height: 50px;
left: 5px;
position: absolute;
top: 98px;
width: 54%;
transform: rotate(22deg);
z-index: 0;
}
.triangle-down:after {
left: auto;
right: 5px;
transform: rotate(-22deg);
}
<div class="triangle-down">
<img src="http://placehold.it/180x105">
</div>
My image is displaying outside the element tag, like this:
Notice that the image itself is outside the element. Tried with both background image and IMG tag. Same results.
HTML and CSS structure:
.class {
width: 35px;
height: 35px;
position: absolute;
background: #FFFFFF;
margin-left: 310px;
border: 1px solid #E6E6E6;
border-radius: 50%;
margin-top: 5px;
}
.rounded {
border-radius: 100%;
}
.class2 {
height: 25px;
z-index: 100;
position: absolute;
width: 25px;
right: 0;
background-size: 25px 25px !Important;
background-color: black !important;
}
<div class="class">
<div class="class2 rounded" style="background: url('<image fetched with php code here>')" ></div>
</div>
The blue square in the image attached above code, is the inspector highlighting and NOT a part of the code/structure.
eThe actual question: Look at the blue element highlighter. That is the element, that the image has been assigned to. Notice how the image is sticking a few pixels out in the top and left side. Why is it outside the element?
I tried display: flex; as mentioned in a now deleted post, that didn't fix it.
just change position:absolute in .class (parent) to position:relative - that would do the trick. Like so:
.class {
width: 35px;
height: 35px;
position: relative;
background: #FFFFFF;
margin-left: 310px;
border: 1px solid #E6E6E6;
border-radius: 50%;
margin-top: 5px;
}
added later:
I see it now. That behaviour is absolutely normal cause they were sqares.
remove radius from .class2 for testing and zoom and you'll see why it happens.
Just adjust position of class2 adding this, and it would be ok.
right: 2px;
top: 2px;
If you set:
top: 0;
left: 0;
right: 0;
bottom: 0;
This will make the element adjustable by margin.
Then you can add:
margin: auto;
and it will display the image centered.
.class {
width: 35px;
height: 35px;
position: absolute;
background: #FFFFFF;
margin-left: 310px;
border: 1px solid #E6E6E6;
border-radius: 50%;
margin-top: 5px;
}
.rounded {
border-radius: 100%;
}
.class2 {
height: 25px;
z-index: 100;
position: absolute;
width: 25px;
right: 0;
left: 0;
bottom: 0;
top: 0;
margin: auto;
/*background-size: 30px 30px;*/
}
<div class="class">
<div class="class2 rounded" style="background: url('http://www.lorempixel.com/100/100/"></div>
</div>
I'm trying to create an envelope icon in HTML/CSS but I can't seem to get this part right.
Image 1
As you can see, the corners don't quite line up correctly with the diagonal lines and I don't really know how to open the angle a little more. This is what I've written :
CSS
.enveloppe {
overflow: hidden;
position: relative;
width: 14px; height: 11px;
border-radius: 3px;
margin-right: 6px;
background: white;
display: inline-block;
}
.enveloppe-plie{
position: absolute;
width: 14px;
height: 5px;
top: 3pt;
content: "";
display: inline-block;
border-right: 1px solid #333333;
border-top: 1px solid #333333;
transform: rotate(135deg);
vertical-align: top;
margin-top: -10px;
margin-left: -5px;
}
HTML
<div class="enveloppe">
<div class="enveloppe-plie"></div>
</div>
Replace margin-left: -5px; with margin-left: 3px; and it looks a bit better
This will make a white envelope. Use this link to learn to make triangles using CSS https://css-tricks.com/snippets/css/css-triangle/
CSS
.envelope {
background-color: white;
border-radius: 4px;
height: 64px;
width: 96px;
overflow: hidden;
position: relative;
}
.envelope-fold1, .envelope-fold2 {
border-right: 48px solid transparent;
border-left: 48px solid transparent;
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
}
.envelope-fold1 {
border-top: 48px solid black;
}
.envelope-fold2 {
border-top: 44px solid white;
}
HTML
<div class="envelope">
<div class="envelope-fold1"></div>
<div class="envelope-fold2"></div>
</div>
when this menu is on the left the 100% width content is fine, as soon as i swap the menu from the left to right right the content is now 100% the whole width and not the space between the menu (its when i add right: 0; to the left menu to make it appear on right
jfiddle left menu: http://jsfiddle.net/mxadam/ZQQ6s/21/
jfiddle right menu: http://jsfiddle.net/mxadam/ZQQ6s/22/
left menu
html, body {
height: 100%;
margin: 0;
font-size: 20px;
}
#left {
width: 300px;
height: 100%;
position: fixed;
outline: 1px solid;
background: red;
z-index: 10;
}
#right {
width: 100%;
height: auto;
outline: 1px solid;
position: absolute;
right: 0;
background: blue;
left: 300px;
border-left: 10px solid #fff;
}
right menu
html, body {
height: 100%;
margin: 0;
font-size: 20px;
}
#left {
width: 300px;
height: 100%;
position: fixed;
outline: 1px solid;
background: red;
z-index: 10;
right: 0;
}
#right {
width: 100%;
height: auto;
outline: 1px solid;
position: absolute;
left: 0;
background: blue;
right: 300px;
border-right: 10px solid #fff;
}
what can i do? cheers
Remove the width:100%.
The left and right coordinates of an absolute or fixed positioned element are enough to calculate the desired width.
Just remove the border:10px.. The white space is nothing but border...
border-left: 10px solid #fff;
Either remove it or make it blue or red to remove the color distinguish.. :-)
Edited JSFiddle (I know it is not needed :P) : http://jsfiddle.net/rahulrulez/ZQQ6s/23/
http://jsfiddle.net/xTPLG/
Check this link. It might help you.
#right {
height: auto;
outline: 1px solid;
position: absolute;
left: 0;
background: blue;
width:250px;
border-right: 10px solid #fff;
}