I try to transform my div container like the following picture.
Left is a normal div container painted black. On the right is the container i want to have.
Do you know how to solve this in css3 ? i read something about the "Polygon" attribute in css3, but i also heard that this attribut was removed.
edit: when content is in the box it would be screchted - the box is like "falling in the back".
I found an article at css-tricks.com regarding this a while back. This may work:
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
#trapezoid {
border-bottom: 100px solid black;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0; width: 100px; }
Check here for more shapes and tricks
Related
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.
This question already has answers here:
How can I make a div with irregular shapes with css3 and html5?
(3 answers)
Closed 1 year ago.
I want to know if it's possible to create this type of div shape with CSS3.
I'm aware you can do things such as this using border's, but is there anyway to get the borders like in the image (spanning he entire top and bottom of the div) - and for bonus points, for it to do it responsively (% widths?)
.cornered {
width: 160px;
height: 0px;
border-bottom: 40px solid red;
border-right: 40px solid white;
}
Any links, fiddles, advice would be appreciated.
As mentioned in my comment, I have created a skewed triangle (if you remove the padding CSS you will see), and then added padding so that you can't see the tip of the triangle
.cornered {
width: 160px;
height: 0px;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 280px solid blue;
padding:60px;
}
Fiddle
You could do this
css
.irregular-shape {
border-left: 1500px solid black;
padding: 50px;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
}
markup
<div class="irregular-shape"></div>
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.
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; }
Can I specify a border like 1px solid color1/color2. for the situation if I have to put a border like the image attached. I know I can put this border as an image, but I am looking if this can be be done in pure css.
You can also achieve the effect of multiple borders on an element with the pseude elements :before and :after.
See this page for examples http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/borders.html
Here is ja demo using this technice (only top border as you described it): http://jsfiddle.net/m7g6L/
div {
border-top: 3px solid #00f;
position: relative;
z-index: 10;
margin: 10px;
width: 200px;
}
div:before {
content: "";
border-top: 1px solid #f00;
position: absolute;
top: 0;
left: 0;
right:0;
z-index: -1;
}
Try this. Enclose the element within a div, then use the div to achieve the desired effect by eliminating the margin and border from the div, like this:
<div style="border-top: solid red 2px; margin: none; padding: 0px;">
<p style="margin-top: 0px; border-top: solid blue 2px;">This is a paragraph.Blah Blah
Blah Blah</p>
</div>
It worked when I tried it out.
Yes, use outline:.
Fair warning: it might mess the focus with some elements.
Example
you could use multiple elements and play with the padding and backgrounds:
http://jsfiddle.net/SJFx4/
not exactly semantic but it works -- you could use pseudo elements to achieve the same effect
Strictly speaking, CSS does not support multiple borders as far as I know.
Nonetheless, you can visually acheive the desired effect by combining an ordinary border with an outline:
#myElement {
border: solid 2px blue;
outline: solid 2px red;
}
If you need the outer "border" to appear only on one side, for example top, then the simplest solution is to use an enclosing div element:
div .borderHelper {
border-top: solid 2px red;
margin: none;
padding: 0;
}
#myElement {
border-top: solid 2px blue;
}