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!
Related
I'm trying to replicate the design of google calendar, and its text input box looks like this when clicked:
https://ibb.co/6Hqrnt4
but what I created looks like this:
https://ibb.co/HprQ125
My code was like
.element{
border-radius: 2px;
border: none;
border-bottom: 2px solid;
}
As you can see, the bottom border of mine gets whined up at the end.
The counterpart of google calendar isn't. I've noticed that the bottom border doesn't perfectly fit the original grey box(zoom in the image), but it doesn't really matter. How can I achieve this?
You can do something like this by giving the blue border to a new element.
.grey-box {
width: 100px;
height: 50px;
display: block;
background-color: #f1f1f1;
border-radius: 5px;
}
.blue-line {
display: block;
width: 100px;
border-bottom: 5px solid blue;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
<div class="grey-box"></div>
<span class="blue-line"></span>
Just taking a guess here as I’m on mobile. Maybe the button is within a div with a bottom border and small border radius
<div class=“blue-line”>
<a href=“#” class=“grey-back”>
<\div>
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.
To make it easier, I created a jsFiddle for this here: http://jsfiddle.net/ond1ju6p/
I am trying to get three divs to align besides each other on top of another div. I thought that giving the first two the width of 33.33% and the third one a width of 33.34%, it would equal the 100% width but that's not working.
What am I doing wrong?
Here is the HTML
<div class="box-top">
<div class="box-top-left">Pig One</div>
<div class="box-top-center">Pig Two</div>
<div class="box-top-right">Pig Three</div>
</div>
<div class="box-bottom">Three little piggies had an awesome day.</div>
And the CSS
.box-top-left {
background-color: #FFF;
padding: 0px;
border-width: 1px 1px 1px 0px;
border: 1px solid #C4C4C4;
border-radius: 5px 5px 0px 0px;
display: inline-block;
width: 33.33%;
}
.box-top-center {
background-color: #CCC;
padding: 0px;
border-width: 1px 1px 1px 0px;
border: 1px solid #C4C4C4;
border-radius: 5px 5px 0px 0px;
display: inline-block;
width: 33.33%;
}
.box-top-right {
background-color: #CCC;
padding: 0px;
border-width: 1px 1px 1px 0px;
border: 1px solid #C4C4C4;
border-radius: 5px 5px 0px 0px;
display: inline-block;
width: 33.34%;
}
.box-bottom {
background-color: #FFF;
padding: 10px 30px;
border-width:0px 1px 1px 1px;
border-radius: 0px 0px 5px 5px;
border: 1px solid #C4C4C4;
}
The issue is because Inline-block divs respect whitespace. Thus your divs have tiny gaps between them from the return key.
Change:
<div class="box-top">
<div class="box-top-left">Pig One</div>
<div class="box-top-center">Pig Two</div>
<div class="box-top-right">Pig Three</div>
</div>
to this:
<div class="box-top">
<div class="box-top-left">Pig One</div><div class="box-top-center">Pig Two</div><div class="box-top-right">Pig Three</div>
</div>
and then add the following css rule to your divs:
box-sizing: border-box;
and it works for me.
Border-box makes the border included in the width size. It has good cross browser support.
js fiddle: http://jsfiddle.net/ond1ju6p/2/
edit: you could also try adding display:flex to the parent instead of removing whitespace.
.box-top {
display:flex;
}
.box-top > div {
box-sizing: border-box;
}
Flex solution fiddle: http://jsfiddle.net/ond1ju6p/3/
You can use display table and table-cell like so:
.box-top {
display: table;
width: 100%;
}
.box-top-left,
.box-top-center,
.box-top-right {
display: table-cell;
width: 33%;
}
The problem is, that you add 1px of border to each side, and thus the boxes become larger than 33.33%. (The border is added by your browser after it has already set the width). The easiest way to fix it would be using calc(33.33% - 2px) as the width.
There are two issues hanging this up.
First is that inline blocks have implicit spacing, so they don't automatically bump right up against one another. That extra spacing is variable by browser and font size, so to get rid of it you can set font-size: 0 on the container element (in this case, .box-top). Of course you then need to reset the font-size on your child elements.
The next issue is that width doesn't include padding or border by default. So your boxes are 33.33%, plus another 2px (the border on both sides). The easiest fix for that is box-sizing: border-box on each child box, which will then include the border inside the width calculation. That would work on most newer browsers, but if your target browser doesn't support box-sizing (most do now, but check http://caniuse.com/#feat=css3-boxsizing) then you would need to fix it so that your boxes are even narrower to make sure the 1px border fits, and that can become a mess.
I would add "float:left;" and "box-sizing:border-box;" (without quotes) to .box-top-left, -middle, and -right and then "clear:both;" to .box-bottom. If that doesn't work I would also make all the widths for those 3 boxes 33.33%.
I have a menu, when the menu item is active it should have a border to the right, the issue is that the border is doesn't render correctly, please notice the bottom edge of the border.
This image shows the issue:
http://imgur.com/FC1n8qA
Jsfiddle: http://jsfiddle.net/2yj3hyqm/5/ (See full screen for better view)
CSS code:
.border {
border-right:4px solid #000;
}
Thanks,
The rendering is correct.
Take a look at this:
border: 10px solid black;
border-right-color: red;
border-bottom-color: blue;
border-left-color: green;
Note how the borders meet at the corners. Your menu items have a thick right border and a thin bottom border. The way borders meet at the corners the thick right border looks slightly crooked at the bottom. Try and remove the bottom border and see how the right border gets straight again.
You can try nesting elements in the menu item and apply the border-bottom and border-right to different elements or use a pseudo element to fix the appearance.
As mentioned, the problem is the bottom border overlaping the right one. So, a possible solution is to "fake" a border using :after pseudo, placing it at the right of the element:
Updated JSFIDDLE
.border {
position: relative;
}
.border:after {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 4px;
background: black;
content: "\00a0"; /* invisible content */
}
Borders meet at angles so you would have to use an alternative for the right border
A box-shadow would work quite well
JSfiddle Comparison (exaggerated)
HTML
<div class="border"> </div>
<div class="shadow"> </div>
CSS
.border,
.shadow {
background-color: grey;
width:100px;
height:100px;
margin-bottom: 10px;
border-bottom: 5px solid lightgrey;
}
.border{
border-right: 20px solid black;
}
.shadow {
box-shadow: 10px 0 0px 0 black;
}
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.