This question already has an answer here:
CSS responsive slanted edge
(1 answer)
Closed 7 years ago.
I'd like to know how to create a div 100% width and say 300px wide where the bottom border is slightly angled across the full width of the box.
It can be done in either CSS or javascript but it needs to be responsive. I've seen examples of using borders but if I'm honest I don't fully understand using borders for super whizzy shapes.
What you're looking for is something like this :
<div class="box"></div>
We want to specify that we want to use the border as the main drawing feature.
We want the bottom left border to be transparent.
Then if we apply a reasonable height to it, we see it gets close to your image..
.box {
border-right: 300px solid red;
border-bottom: 10px solid transparent;
height:100px;
}
This then is a drawing of purely borders, stretched and sized so much they look solid.
JSFiddle
Making it responsive is a little more tricky as borders are not supported with percentage values.
You will always have a maximux border size set in a fixed value.
In our case we will use 300 px as previously, so our .box class becomes like so :
.box {
border-right: 300px solid red;
border-bottom: 10px solid transparent;
height:100px;
width:100%;
right:0px;
float:right;
}
We are going to pull right, so that the solid looking image will actually float left.
We will then add a wrapper which will have an overflow of hidden, so even though the border-image will not change size, the overflow will make it seem as it is.
.box_wrapper{
width:100px;
overflow:hidden;
left:0px;
}
Our HTML gains a wrapper :
<div class="box_wrapper">
<div class="box"></div>
</div>
And the result is something of a responsive workaround!
JSFiddle 2
If you update the .box_wrapper size in the fiddle, the bordered box will look like it's adjusting its width.
Note: There may be a much better way to achieve this!
Related
This question already has answers here:
How to give border to any element using css without adding border-width to the whole width of element?
(12 answers)
Closed 4 years ago.
I have the following div style
.myDivStyle{
width: 0px;
position: absolute;
z-index: 1;
top: 0;
overflow-x: hidden;
}
which is applied to my div
<div id="myDiv" class="myDivStyle">...</div>
which looks perfect, and the following script returns 0px, again perfect.
alert($("#myDiv").css("width"));
But if I add a border to that style such as :
border: 1px solid #cccccc;
then there is a small 2px wide bod on the screen, and the js code above return a width of 2px.
How can I get the bordered div to not be visible on the screen and return a 0px width?
The show/hide of the div is controlled by javascript.
I know I can use display:none; and turn it on again with the javascript but I want to see if it can be done by adjusting the style?
alert($("#myDiv").css("width"));
.myDivStyle {
width: 0px;
position: absolute;
z-index: 1;
top: 0;
overflow-x: hidden;
border: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv" class="myDivStyle">...</div>
You can use outline style. Read here for different between outline and border
From: https://www.tutorialrepublic.com/css-tutorial/css-outline.php
Outlines do not take up space, because they always placed on top of the box of the element which may cause them to overlap other elements
on the page.
Unlike borders, outlines won't allow us to set each edge to a different width, or set different colors and styles for each edge. An
outline is the same on all sides.
Outlines don't have any impact on surrounding elements apart from overlapping.
Unlike borders, outlines don't change the size or position of the element.
Outlines may be non-rectangular.
You can use:
Box-sizing: border-box;
So that your width of your css width also controls your border.
For the Javascript try using:
$(id).innerWidth(); or $(id).outerWidth();
and see what fits your expectations.
I'm trying do this to long time, but... no luck. The question itself is a little simple.
I need make a div to begin on the left side of screen and ending on the end of a col-xx-x div, which in turn is inside a row div, which in turn is inside a container div.
I've already done it with jQuery, but I'm searching for a way to do that using only HTML and CSS.
I made a image to a better understanding:
(The red square is the div that i want, but it's obvious)
Note: Notice that on my image I used a col-md-6 div, but the col is indeterminate (col-xx-x), I used 6 only to draw.
Here is a fiddle with the code using jQuery:
https://fiddle.jshell.net/b8xcp6j7/
You can adjust .box element width to 200%, set position to relative, left to -100%
.box {
width: 200%;
border: 4px solid red;
padding: 15px;
position:relative;
left:-100%;
}
jsfiddle https://fiddle.jshell.net/6a0uac4y/2/
I am trying to scale content within a div based on it's width.
As an example, I have a div:
<div id="container"></div>
I have styling such as:
#container { margin: 0px auto; width: 810px; height: 800px; border: 1px solid #000; }
This presents me with a div 810px wide and 800px tall, nicely centered on screen with an outline.
Let's say I have a banner graphic at the top which should scale with the div, so I have it's width at 100%. Works great.
I have a background graphic for the container div itself set to scale with the width as well, working great.
What I need help with, is let's say I had a heading underneath the banner, but this font size needed to scale with everything else, based on the width of the container. How would I accomplish this?
I am also looking to add other elements such as buttons, which would need to scale.
At the end of the day, imagine and image with a width of 100%, and how it scales proportionately, perfectly. This is how I need the container div and all its children to act, like an image. I hope this makes sense.
I have looked at scaling text like in this link: http://jsfiddle.net/Aye4h/
This is the perfect behavior, but I need more than just text to scale.
Scaling is a complicated matter as some content is vector based or otherwise rendered on-demand, and some content is raster based (e.g., images). If you want to scale an entire element as if it was just an image, then have a look at transform: scale:
#scaled {
border: #f00 solid 5px;
background: #0ff;
height: 500px;
margin: -125px;
transform: scale(0.5);
width: 500px;
}
<h1>This is outside the scaled element</h1>
<div id="scaled">
<h2>Inside the scaled element</h2>
<p>An image:</p>
<p><img src="http://i.imgur.com/3A1Loxw.jpg"></p>
</div>
Keep in mind that the transform is applied after the image has been laid out on the page so all content around it will think it's still at its original size. You can work around this in many other ways, such as by using negative margin values (as I did in the example).
I am trying to create an irregular border around a div, the div will contain text. I am currently using two different images and making them background on the top and bottom of the div. This method works out pretty well but the problem is the div can grow, i.e. it can have variable width and height depending on its content. So, in this case using images as background to achieve this effect is no longer viable.
Is there any way to create an irregular border using CSS and javascript? Obviously, the border should accommodate variable width and height.
I am trying to achieve something like this, but on all sides.
I'd try background-size:contain using that image and then add some padding too keep the text away. It'll scale but it might look pixelated if the box gets too large. Otherwise, you'd need to make the edges repeatable which is probably near impossible given the image you've supplied.
PS. Reminds me of the days we all wanted rounded corners and now we flat design barely uses the border-radius property.
Use a background image for the div itself and CSS border-image for the borders. Here's an example: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image
You can also use 2-3 divs to achieve what you are trying to do. Create an image which has the top decoration you want and set that as the background image. Then get another image with your side design, which is repeatable, but not so small that the pattern becomes apparent, and use that as the image with repeat-y enabled. Something like this
.image-top {
background: img(url) no-repeat;
min-height: 25px;
}
.image-middle {
background: img(url2) repeat-y;
}
<div class="image-top">
</div>
<div class="image-middle">
content goes here
</div>
or
.image-top {
background: img(url) no-repeat;
min-height: 25px;
}
.image-middle {
background: img(url2) repeat-y;
}
.image-bottom {
background: img(url3) no-repeat;
min-height: 25px;
}
<div class="image-top">
</div>
<div class="image-middle">
content goes here
</div>
<div class="image-bottom">
</div>
I've noticed vertical lines like in the website trippeo.com if you scroll down to where it says "increase traveler loyalty..." and then has a vertical line below. How would you create a long line like that in web design? Would you need to make an image and absolute position it or is there a better way with HTML, CSS, and or JavaScript?
You can do in two ways:
Background Image aligned to right and repeated across y-axis.
.main-liner {background: url("bg.png") repeat-y right top transparent;}
Border
.main-liner {border-right: 2px solid #f00; margin-right: -2px;}
Preview:
Fiddle: http://jsfiddle.net/praveenscience/RU42F/