I'm trying to achieve a tapered <div> tag. That is, a slant edge on one side (slanting inwards) and a straight edge on all the other 3 sides.
I'm not sure if it is possible using CSS and HTML alone. I've tried Googling this problem, but could not find any solution to it.
I've tried:
-webkit-border-bottom-right-radius : 50px 650px;
where 650px is the whole height if my div. But this gives me a rounded corner for the bottom right position, which I don't want. Hope you guys know the answer to this problem, or at least suggest an alternative to this.
This can be achieved with transparent border!
CSS
#test1 {
border-top: 100px solid red;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
width: 300px;
}
#test2 {
border-top: 100px solid red;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
#test3 {
border-top: 100px solid red;
border-right: 50px solid transparent;
height: 100px;
width: 100px;
content: 'ds';
z-index: -1; /* make it the background */
}
#test3 .content {
position: relative;
top: -100px;
margin: 5px;
float: left; /* wrap the text */
clear: left; /* for demo */
font-size: 1em;
background-color: cyan;
}
HTML
<body>
<div id="test1">
</div>
<br/>
<div id="test2">
</div>
<br/>
<div id="test3">
<div class="content">
Watch for the<br>
new lines. <br>
Do not overlap.
</div>
</div>
</body>
Looks like CSS regions might http://www.adobe.com/devnet/html5/articles/css3-regions.html (scroll down to the section entitled "Wrap shape"). You could define the shape as a polygon and you're set! Unfortunately, shaped region support is currently limited, but depending on your use case, it might work.
Related
This seems like it wouldn't be all that hard to do, but I'm having a hard time with it. I just want to add a left border to a div like this:
I tried to add a border-left property (border-left: 5px solid blue;), but that produced this:
Can anyone tell me how to add a border with a straight edge without the rounding at the top and bottom?
Thanks!
Rob G
you need the parent div to hidding overflow
.rounded{
border-radius: 7px;
overflow: hidden;
}
.border{
border-left: 6px solid blue;
width: 100px;
height: 70px;
background: lightgray;
}
<div class="rounded">
<div class="border"></div>
</div>
Hope this helps:
div {
border-radius: 5px;
padding: 5px;
border-left: 5px #70baff solid;
background-color: #f5f5f5;
}
<div>
Hello World
</div>
Let me know if you have any questions!
I am trying to build a monitor design using pure CSS. Currently, I have this:
CSS Monitor Design Fiddle
It looks ok, but if you play around with the screen size, the design itself is not responsive. Its parent container is responsive, thanks to Skeleton.
Now, I want to do these things:
Make the design responsive and fit to any screen size.
Maintain the aspect ratio of the screen. This is the main problem. I tried things like width: 100%, however, without a fixed height, things dont work.
Finally, I want the monitor base to be wired, that is, I want the trapezium to only have borders and not a fill color.
Any help is greatly appreciated!
My code:
HTML
<body>
<div class="container">
<div class="monitor-container">
<div class="monitor-top">
<div class="screen-content">
</div>
</div>
<div class="monitor-base">
</div>
</div>
</div>
</body>
CSS
.monitor-container {
margin: 25px;
padding: 25px;
border: 1px solid #000;
}
.monitor-top {
margin: auto;
width: 400px;
height: 250px;
border: 1px solid #000;
border-radius: 5px;
}
.screen-content {
margin: 25px;
width: 350px;
height: 200px;
border: 1px solid #000;
border-radius: 5px;
}
.monitor-base {
margin: 0 auto;
border-bottom: 50px solid black;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 100px;
border-radius: 5px;
}
For the boilerplate, I am using these:
https://raw.githubusercontent.com/dhg/Skeleton/master/css/normalize.css
https://raw.githubusercontent.com/dhg/Skeleton/master/css/skeleton.css
To do the trapezium you need to put another trapezium over the top to give a wired effect. The way you have done it with borders can't be utilised in itself to have a wired feel.
add this line
<div class="monitor-base">
**<div class="mb2">
</div>**
</div>
and the css like this
.mb2 {
position:relative;
left:-22px;
top:2px;
margin: 0 auto;
border-bottom: 45px solid white;
border-left: 22px solid transparent;
border-right: 22px solid transparent;
height: 0;
width: 100px;
border-radius: 5px;
}
to have a wired effect.
The aspect ratio is something you would need to use a javascript preprocessor for I think, in vanilla css I don't think it is possible to maintain the aspect ratio as the height and width are independent, however in scss or less you can tie them together. I think.
I want to style only the content area of a div having a padding to visualize its content boundary like the inner box in the dev-tools is colored by the web browser. I've tried many things but either the css recommendations are not yet implemented like or maybe I use it in the wrong way.
<div class="around">
<div class="div-with-padding outline-content">
stuff ...
</div>
</div>
.around { margin: 50px auto; width: 400px; padding: 0px; }
.div-with-padding { min-height: 200px; padding: 15px; }
I've added an outline to the div just for comparison. The position: relative below is needed because its child's max-height/width only fits to the matched div if its position is relative.
.outline-content {
outline: 1px solid red;
position: relative; /* in the original post I've used bootstrap instead */
}
I've found no way to do this within the original div so I've added a pseudo-element.
First try:
.outline-content::before {
content: '';
position: absolute;
width: max-content; height: max-content;
outline: 1px dotted blue;
}
I don't really understand how max-content works. I've tried also others mdn. Maybe it doesn't work because I've set position: absolute; to don't change the page itself.
Second try:
.outline-content::before {
content: '';
position: absolute;
width: calc(100% - 30px); height: calc(100% - 30px);
outline: 1px dotted blue;
}
The question is how to get parent's padding = 30px if it isn't always the same. I've tried much more but without success.
I know with jQuery this problem becomes easy. If anybody knows an answer using only css … I really like to know it. Please also correct mistakes in my code snippets (width: max-content; and the like).
Thanks!
(this post includes some adaptions to the comments)
The magic css-property is called "background-clip".
HTML
<div class="outer">
outer-content
<div class="inner">
inner-content
</div>
</div>
CSS
.outer {
display:inline-block;
background-color: red;
border: 1px solid black;
padding: 10px;
}
.inner {
width: 100px;
height: 100px;
padding: 10px;
background-clip: content-box;
-moz-background-clip: content-box;
background-color: green;
border: 1px solid black;
}
Example: http://jsfiddle.net/u2vyqdc6/2/
As you can see:
One surrounding div with some content and some padding so you can see better what's going on.
Inside is another div with content, padding and "background-clip: content-box".
"background-clip" works just like "(-moz-)border-box". It tells the browser how to handle the background-specific box-model.
And the best thing?
Browser-support is almost universal at 95%:
http://caniuse.com/#feat=background-img-opts
I'm doing an exercise to improve my coding and I'm trying to copy the layout from this page http://imgur.com/pM8owcj
I'm stuck with the 3-column section because each column overlaps the other.
I'm a beginner as you can see, I'll really appreciate any help.
Here is the link with the code: http://codepen.io/porpita/pen/ElKty
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="estilo.css" rel="stylesheet" type="text/css">
<title>
Ejercicio Multimedia
</title>
</head>
<body>
<section id="content">
<div id="header">
</div>
<div id="headermenu">
</div>
<div id="imagenprincipal">
</div>
<div id="espacio">
</div>
<div id="galeria">
<div id="columna">
<div id="movimientos"></div>
<div id="eventos"></div>
</div>
<div id="exposiciones"></div>
<div id="noticias"></div>
</div>
</section>
</body>
</html>
CSS
#content {
width: 1144px;
margin: 0 auto;
}
#header {
height: 140px;
border: 3px #000 solid;
}
#headermenu {
height: 40px;
border: 3px #000 solid;
}
#imagenprincipal {
height: 429px;
border: 3px #000 solid;
}
#espacio {
height: 69px;
border: 3px #000 solid;
}
#galeria {
height: 825px;
border: 3px #000 solid;
}
#columna {
width: 338px;
height: 825px;
border: 3px #000 solid;
float: left;
}
#movimientos {
width: 338px;
height: 353px;
border: 3px #000 solid;
}
#eventos {
width: 338px;
height: 472px;
border: 3px #000 solid;
}
#exposiciones {
width: 480px;
height: 825px;
}
#noticias {
width: 326px;
height: 825px;
border: 3px #000 solid;
}
Thanks a lot.
See the Updated Codepen Here: http://codepen.io/anon/pen/tmnrj
The borders you had around the inner elements (#columna, #exposiciones and #noticias) were adding to their widths, so 338px wide with a 3px border all around = 344px wide. You either need to reduce the width to compensate for the 6 pixels of border (3px each side) or set box-sizing: border-box; on the elements so they include the borders in their widths.
Reference on Box Sizing: http://css-tricks.com/box-sizing/
You were also only floating #columna. You need to float all three (#columna, #exposiciones and #noticias) and then set position: relative; overflow: hidden on #galeria to make sure it contains them or it will collapse.
Reference on floats: http://css-tricks.com/all-about-floats/
On a side note - Adding a background colour to the various elements can help identify what was happening with each as you can see in the above fiddle.
Hope that helps.
You're running into space issues because you are using thick pixel borders. Borders are applied to the outside of an element. This means if you set a width of 50px, then add a border of 3px all around, your final width is actually 56px, or 3px + 50px + 3px.
MDN has great documentation on how the CSS box model works, it'll save you hours of stuffing around.
Rather than trying to manually force things into place, it's often easier to allow the browser to calculate it for you by using percentages instead of fixed values like pixels.
It's also handy to test using background-color rather than border to identify elements, as the background color won't effect the actual width of your element.
Here's an example of your layout using percentages: Fiddle
I'm trying to get text to be on top (or in front of) a CSS shape. It works with border-bottom, but not with border-top (which is what I need it to look like).
I am assuming that because the border-top property is set that it's pushing the text below the shape.
Not too sure how to get it to work correctly without having to use an image. I could have swore I've seen this done before, but I can't remember where.
Here's my fiddle: http://jsfiddle.net/ultraloveninja/W2SPd/
<h1>the trap</h1>
h1 {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
You need 2 elements and 2 CSS styles. One for the text, and one for the background:
<h1><div>the trap</div></h1>
CSS
h1 {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
h1 div {
position: relative;
top: -100px;
}
http://jsfiddle.net/vPt7h/
You can insert a span tag for the text and get:
h1 {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
position:relative;
}
h1 span {
position: absolute;
top: -100px;
}
Demo http://jsfiddle.net/W2SPd/10/
Feasible?
Simply create a new pseudo element :after and then style the pseudo element with the border styles instead :)
The advantages? You don't have to create new elements just for the style alone, or use unnecessary nesting/wrapping with no semantic meaning; and it is not an image-based solution. The drawback - requires browser support for pseudo elements, so may not work on old versions of IE... but that's not something you should worry about.
h1 {
width: 100px;
padding: 0 50px; /* To account for the left and right borders in pseudo element to ensure it lines up */
}
h1:after {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
z-index: -1; /* Displays pseudo element behind text */
width: 100px;
}
See fiddle here - http://jsfiddle.net/teddyrised/W2SPd/11/
That's really a bad way to do it imo. It will still take up more space than needed and you're asking for potential problems down the road. Yes you can use the examples others have provided but if it were me, I would make the shape an image and use it as a background via CSS.
.myShape { background:url(/pathto/your/image.png); width:150px; height:100px; }