I'm basically trying to do a "CSS-triangle" (you know, an element where the entire shape is generated using borders) but instead of a triangle shape, I want a square with rounded corners on the left side and straight corners on the right side.
This works fine in Chrome but IE11 creates a weird artefact at the top-left corner. (a background-colored oval right where the rounded corner should be. really strange!)
Is there a way to create a workaround for IE11?
.RoundedElement {
width: 0;
height: 0;
border-top: none;
border-bottom: 50px solid transparent;
border-right: 20px solid #00a2d4;
position: relative;
right: 20px;
border-radius: 15px 0px 0px 15px;
border-color: #F7A824;
}
http://codepen.io/anon/pen/QbjaOG
I think you are over complicating the problem here.
Try the following:
body { margin: 50px; }
.RoundedElement {
width: 30px;
height: 50px;
position: relative;
right: 20px;
border-radius: 15px 0px 0px 15px;
background-color: #F7A824;
}
<div class="RoundedElement">
</div>
Why not use the regular background-color with border radius that works by default ?
If you still want to use border try the following:
body { margin: 50px; }
.RoundedElement {
width: 20px; //Added 20px to fix in FF.
height: 0px;
border-top:30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 40px solid #00a2d4;
position: relative;
border-radius: 15px 0px 0px 15px;
border-color: #F7A824;
}
<div class="RoundedElement">
</div>
tweaking the code to:
body { margin: 50px; }
.RoundedElement {
width: 10px;
height: 0;
border-top:30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 10px solid #00a2d4;
position: relative;
right: 20px;
border-radius: 15px 0px 0px 15px;
border-color: #F7A824;
z-index:2
}
pen
works in FF (should also in ie but not tested)
There is no need to do it like this. Use border-radius (support here). Also what you have is not a square, this is.
div {
width: 100px;
height: 100px;
border-radius: 50% 0px 0px 50%;
background: #000;
}
<div></div>
It not work because your div size is 0: width: 0; height: 0;
Related
.hr-line {
margin: -30px auto 10px;
padding: 0;
height: 50px;
border: none;
border-bottom: 1px solid;
box-shadow: 0 20px 20px -20px;
width: 95%;
}
this is this line (highlighted in the screenshot)
you need to make the shadow up, as in the photo, just the opposite.
Please help, im newbie :DDDD
I'm sure there are other options, but makes sense to rotate it 180 degrees.
.hr-line {
margin: 30px auto -30px;
padding: 0;
height: 50px;
border: none;
border-bottom: 1px solid;
box-shadow: 0 20px 20px -20px;
width: 95%;
transform: rotate(180deg);
background: transparent;
}
text before
<div class="hr-line"></div>
text after, play with the margin: 30px auto -30px;
I have a small "floating_Note_DIV" which I want to display on top of a textarea, as shown in the pictures. As well, I want to show a yellow_DIV below the textarea, flushed with the bottom edge of the textarea. If I do not display the floating_Note_DIV, the textarea is flushed with yellow_DIV (seen below in Image_1).
However, if I display the floating_Note_DIV, a gap appears between the textarea and the yellow_DIV ; i.e., I was thinking that if I put position: relative, and top and left/right I would get the f_N_DIV to fly over the textarea. It does seem to work however it looks like a gap is left where the "footprint" of the f_N_Div is left behind, at it's "supposed-to-be" position between tomato_DIV and yellow_DIV (see below Image_2).
If I use position "Absolute" it gets positioned w.r.t to the whole page, I am expecting the tomato_DIV to move around and so the f_N_DIV will have to be positioned w.r.t the textarea or tomato_DIV.
Any workaround? Thanks, all help appreciated ! !
the HTML is:
<div id='tomato_DIV' >
<textarea id="textarea_main" cols="40" rows="3" maxlength="300"></textarea>
<div id="floating_Note_DIV">Your Thoughts!!</div>
<div id="yellow_DIV"></div>
</div>
the relavant CSS is:
#tomato_DIV
{ background-color: tomato;
padding: 0px 0px 5px 0px;
width: 310px;
border-radius: 5px; }
#textarea_main
{ box-sizing: border-box;
margin: 5px 5px 0px 5px; padding: 2px; /* note: bottom margin is 0 to make flush with yellow div */
width: calc(100% - 10px);
height: 75px;
resize: none; outline: none;
border: 1px solid #737d96; border-radius: 3px; }
#floating_Note_DIV
{ margin: 0px 0px 0px 0px;
padding: 0px 2px 0px 0px;
position: relative; /* how to do this bit? */
right: -232px;
top: -14px;
width: 70px;
height: 11px;
font-size: 8px; font-style: normal; font-weight: bold; color: black;
text-align: right; border: 1px solid #737d96; }
#yellow_DIV
{ margin: 0px 5px 5px 5px; /* note: top margin is 0 to make flush with textarea */
border: 1px solid grey;
border-radius: 3px;
width: calc(100% -10px);
height: 30px; background-color: #fdffb6; }
Is this what you are trying to achieve?
HTML : Put the #floating_Note_DIV element inside #yellow_DIV. You could leave it where it is, but setting top CSS property would have been difficult.
CSS :
Change position property of #floating_Note_DIV from relative to absolute.
Set position property of #yellow_DIV to relative.
Set right to 0.
Set bottom to 100%.
I modified the margin-bottom to 5px to align it perfectly.
#tomato_DIV {
background-color: tomato;
padding: 0px 0px 5px 0px;
width: 310px;
border-radius: 5px;
}
#textarea_main {
box-sizing: border-box;
margin: 5px 5px 0px 5px;
padding: 2px;
/* note: bottom margin is 0 to make flush with yellow div */
width: calc(100% - 10px);
height: 75px;
resize: none;
outline: none;
border: 1px solid #737d96;
border-radius: 3px;
}
#floating_Note_DIV {
margin: 0px 0px 5px 0px;
padding: 0px 2px 0px 0px;
position: relative;
position: absolute;
right: 0;
bottom: 100%;
width: 70px;
height: 11px;
font-size: 8px;
font-style: normal;
font-weight: bold;
color: black;
text-align: right;
border: 1px solid #737d96;
}
#yellow_DIV {
margin: 0px 5px 5px 5px;
/* note: top margin is 0 to make flush with textarea */
border: 1px solid grey;
position: relative;
border-radius: 3px;
width: calc(100% -10px);
height: 30px;
background-color: #fdffb6;
}
<div id='tomato_DIV'>
<textarea id="textarea_main" cols="40" rows="3" maxlength="300">
</textarea>
<div id="yellow_DIV">
<div id="floating_Note_DIV">Your Thoughts!!</div>
</div>
</div>
.myButton {
float: right;
border-top: 40px solid pink;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
width: 25%;
}
<div class="myButton">
Submit
</div>
The above is my code. As you can see I want to design a shape like the image below but I want the word Submit to be in the center but it is pushed down.
Anyone know a solution?
You can use linear-gradient background for this. Techique is based on setting fixed height and then applying padding equals height multiplied by √2:
.my-button {
border: 0;
height: 40px;
background: linear-gradient(45deg, transparent 40px, pink 40px);
padding-left: 56.5691px; /* 40 × √2 ≈ 56.5691 */
}
<button class="my-button">Submit</button>
Also you can achieve this via absolutely position pseudoelement:
.my-button {
background-color: pink;
position: relative;
height: 40px;
margin-left: 40px;
border: 0;
}
.my-button:after {
content: "";
position: absolute;
top: 0;
left: 0;
/* Move pseudoelement to the left to 100% of its width */
transform: translateX(-100%);
border-top: 40px solid pink;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
}
<button class="my-button">Submit</button>
The issue with what you have is that you're using a top border instead of a background so your text naturally won't look to be in the center of your shape. What you can do is use positioning to manually move your text up within the shape:
.myButton {
float: right;
border-top: 40px solid pink;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
width: 25%;
position: relative;
}
.inner {
position: absolute;
top: -30px;
left: 40px;
}
<div class="myButton">
<div class="inner">Submit</div>
</div>
Is there a way to create a trapezoid shadow effect underneath a image such as the one in the image?
I only know create trapezoid with border. What i've came up with so far is this:
HTML
<div id="trapezoid"></div>
CSS
#trapezoid {
height: 0;
width: 120px;
border-bottom: 80px solid #05ed08;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
padding: 0 8px 0 0;
}
Thanks in advance.
I've created a jsFiddle that demonstrates a way to do it. In essence: give the image a shadow, overlay a transparent div on it that hides left, top and right border of the shadow. Because of these white borders this trick will not work if you use a complex background.
.wrapper {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
.wrapper img {
box-shadow: 0 0 50px black;
margin: 0px 30px 50px 30px;
}
.wrapper .overlay {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 100%;
height: 100%;
border-top: 0px solid white;
border-left: 30px solid white;
border-right: 30px solid white;
border-bottom: 50px solid transparent;
box-sizing: border-box;
}
<div class="wrapper">
<img src="http://i.stack.imgur.com/eg2RH.jpg" width="400" />
<div class="overlay"></div>
</div>
Does anyone know how to make edgy corners like in the following below? See how the edge wraps around the corner. I would like to know the term as well (if any). cross browser support (IE8 and up, bonus IE7) is a must. Thanks for any help.
Check out this tutorial. I don't know how crossbrowser compatible it is (as it is CSS3), but it achieves the effect you want.
HTML:
<div>
<h2></h2>
</div>
CSS:
div {
width: 200px;
padding: 50px;
margin: 0 auto;
border: 1px solid #333;
}
h2 {
position: relative;
width: 50%;
height: 50px;
margin: 30px 10px 10px -70px;
background-color: orange;
}
h2:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #666 #666 transparent transparent;
}
JS Fiddle Example
.box{
background: #666;
border: 4px solid #fff;
box-shadow: 0px 0px 20px #000;
width: 200px;
height: 200px;
margin: 40px auto;
position: relative;
}
.ribbon{
background: #FFA500;
position: absolute;
width: 100%;
top: 20px;
left: -20px;
height: 20px;
padding-right: 20px;
}
.ribbon::before{
content: '';
position: absolute;
left: 0px;
top: 20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 16px 10px 0;
border-color: transparent #FFA500 transparent transparent;
z-index: -5;
}
HTML:
<div class="box">
<div class="ribbon"></div>
</div>
(DEMO)
I don't think IE 7/8 support the ::before pseudo-element, so if you want IE compatibility add another element and put ::before styles on it :)
That edgy corner is only a div with a triangle actually, you only need ONE element to do it.
<div id="myCorner"></div>
myCorner will be the div, and myCorner:after will be the triangle.
Check it out : http://jsfiddle.net/Starx/Xp6E7/2/
#myCorner
{
width:100px;
height:70px;
background-color:orange;
-webkit-box-shadow: 0 4px 5px -3px black;
-moz-box-shadow: 0 4px 5px -3px black;
box-shadow: 0 4px 5px -3px black;
position:relative;
}
#myCorner:after
{
content:"";
position:absolute;
left: 0;
top:100%;
width: 0px;
height: 0px;
border-style:solid;
border-width: 5px 10px;
border-color: orange orange transparent transparent;
z-index: -1;
}