I've been looking everywhere and couldn't find this exact example:
I managed to do this, but as you can see, it's not inverted and not curved:
.outer {
overflow: hidden;
}
.inner {
border-bottom: 1px solid #888;
}
.inner i {
width: 40px;
height: 40px;
border: 1px solid #888;
border-radius: 150%;
background-color: #fff;
}
.inner .top {
margin-top: -20px;
}
.inner .bottom {
margin-top: -20px;
margin-bottom: -22px;
}
.inner .left {
float: left;
margin-left: -20px;
}
.inner .right {
float: right;
margin-right: -20px;
}
.content {
min-height: 10px;
}
<div class="outer">
<div class="inner">
<div class="content"></div>
<i class="bottom right"></i>
<i class="bottom left"></i>
</div>
</div>
Is that possible? I want it to as short as possible (height), like the image - and also I don't want to use an image or SVG (I tried that and it looks weird) I want to use this with dynamic width.
You need to make use of border-top instead of border-bottom
.border-curve {
width: 20em;
height: 10em;
background: transparent;
border-top: 1px solid hsl(180deg 100% 52%);
border-radius: 0.35em;
}
body {
background: gray;
}
<div class="border-curve"></div>
Related
I need to achieve something like this:
representation
I have found similar issues but they do not completely cover my task. Here is an example of a thing I have found:
.blue-background {
background-color: blue;
border-radius: 5px;
top: 3em;
left: 230px;
padding: 10px;
font-family: Roboto, sans-serif;
font-size: 14px;
line-height: 22px;
color: #313333;
display: flex;
align-items: center;
width: 260px;
}
.blue-background::after {
content: ' ';
width: 0px;
height: 0px;
border-top: 25px solid transparent;
border-left: 37px solid blue;
border-bottom: 25px solid transparent;
border-right: 0px solid transparent;
position: absolute;
top: 43%;
left: 47%;
}
.child-image-wrapper {
max-width: 260px;
margin: auto;
img {
max-width: 260px;
}
}
<div class="col-md-4 col-xs-12">
<div class="image-block">
<div class="blue-background">
<h2>Some Text <span class="arrow"></span></h2>
</div>
<div class="child-image-wrapper">
<img src="This is an image" />
</div>
</div>
Now the problem with the above CSS is that this works only at particular screen size (like 585px or so) otherwise the arrow "detaches" from the left div and goes into the right div. What I need is for the blue arrow to be stuck to the left div even if the screen size changes. Would it be possible to achieve this in some way? Sorry I am pretty new to front-end design
You can do it like so:
.wrapper {
width: 10em;
height: 2em; /* Height needs to match .right::after height and width */
display: flex;
}
.left {
background-color: lightblue;
width: 50%;
}
.right {
background-color: lightpink;
border-left: 1px solid purple;
width: 50%;
position: relative;
overflow: hidden;
}
.right:before {
height: 2em; /* Match height above*/
width: 2em; /* Match height above*/
background-color: #b77681;
position: absolute;
top: 50%;
left: 0%;
content: "";
border: 1px solid #864954;
transform: translate(-73%, -50%) rotate(45deg);
}
<div class='wrapper'>
<div class='left'>
</div>
<div class='right'>
</div>
</div>
I encourage you to read more about the position property (in our case specifically absolute and relative). here you can find some introduction.
As per your question change the top and left properties in .blue-background::after to fit the position for the arrow as you want.
here is an example: https://jsfiddle.net/qa9un7fy/
https://jsfiddle.net/3Lthpf72/5/
Html css with jsfiddle ex: not working: vertical align and using full width based on width percentage of two child containers
When I make the two child containers add up to the parent width percentage, it folds down. Also the vertical align middle is at the bottom, not the middle.
Any thoughts?
.payee.list-item {
border: 1px solid red;
height: 100%;
width: 300px;
}
.list-item-content {
display: inline-block;
border: 1px solid blue;
width: 80%
}
.payee.list-item>img {
border: 1px solid green;
height: 45px;
display: inline-block;
width: 17%;
vertical-align: middle;
}
<div class="payee list-item">
<img src="/Image/PayeeBillPayAccountPortrait/832">
<div class="list-item-content">
<h4>Colonel Sanders!</h4>
<h3>Colonel Sanders</h3>
</div>
</div>
Are you trying to do something like that?
.payee.list-item {
border: 1px solid red;
height: 100%;
width: 300px;
display: inline-block;
position: relative;
}
.list-item-content {
float: right;
border: 1px solid blue;
width: 80%
}
h3, h4 {
width: 50%;
float: left;
box-sizing: border-box;
padding: 6px;
}
h3{background: lightgray;}
h4{background: gray;}
.payee.list-item>img {
border: 1px solid green;
max-height: 45px;
width: 17%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div class="payee list-item">
<img src="https://static.pexels.com/photos/6555/nature-sunset-person-woman.jpg">
<div class="list-item-content">
<h3>Colonel Sanders</h3>
<h4>Colonel Sanders!</h4>
</div>
</div>
So I'm trying to get divs to fit perfectly in a wrapper using fixed pixels for width and height. Although I'm confused as to how the pixels don't add up properly.
HTML
<div class="div1">
<img src="image.png" alt="image" class="image">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
</div>
CSS
#wrapper {
height: 455px;
width: 690px;
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
overflow: hidden;
white-space:nowrap;
}
.div1 {
display: inline-block;
margin-bottom: 10px;
vertical-align:top;
}
.image {
max-width: 172px;
max-height: 172px;
border-radius: 2%;
border: 4px solid blue;
}
.div2 {
height: 172px;
width: 277px;
border: 4px solid blue;
display: inline-block;
margin-left: 30px;
background-color: purple;
}
.div3 {
width: 159px;
height: 188px;
display: inline-block;
margin-left: 30px;
border-left: 4px solid blue;
border-right: 2px solid blue;
border-top: 2px solid blue;
vertical-align: top;
background-color: purple;
}
.div4 {
background: url(image.png) no-repeat center;
background-size: cover;
width: 690px;
height: 265px;
}
If the parent div is 690px wide why can't the child divs add up to 690 with calculated widths, margin and boarders.
(div1)180 + 30 + (div2)285 + 30 + (div3)165 = 690px
If you look at div 3 it's right border can't be seen. You have to reduce the width by 7px to see it.
This is also happening vertically with a 190px div3 height meant to touch div4 exactly but is off by 4px.
Is this a browser issue? Default Alignment issues I'm not aware of? I'm really curious to know why this happens!
Any feedback would be appreciated. : )
If you put comments like this in your HTML you can fix the top but for the image in the 2nd line I dont know yet I continue trying
OK SO I did put the 1st line in a div "test" and gaved him display:block and overflow hidden to take away the the space under and then I did give the div1 fixed heigth and width 180px (image+border)
#wrapper {
height: 455px;
width: 690px;
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
overflow: hidden;
}
.test{
display:block;
overflow: hidden;
}
.div1 {
height:180px;
width:180px;
display: inline-block;
margin-bottom: 10px;
vertical-align:top;
}
.image {
max-width: 172px;
max-height: 172px;
border-radius: 2%;
border: 4px solid blue;
}
.div2 {
height: 172px;
width: 277px;
border: 4px solid blue;
display: inline-block;
margin-left: 30px;
background-color: purple;
}
.div3 {
width: 159px;
height: 188px;
display: inline-block;
margin-left: 30px;
border-left: 4px solid blue;
border-right: 2px solid blue;
border-top: 2px solid blue;
vertical-align: top;
background-color: purple;
}
.div4 {
background: url('http://lorempixel.com/690/265/cats') no-repeat center;
background-size: contain;
width: 690px;
height: 265px;
display:block;
overflow: hidden;
}
<div id="wrapper">
<div class="test">
<div class="div1">
<img src="http://lorempixel.com/172/172/cats" alt="image" class="image">
</div><!--
--><div class="div2">
</div><!--
--><div class="div3">
</div><!--
--> </div><div class="div4">
</div>
</div>
have you checked out box-sizing feature?
Here is some links that might be helpful.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
I have a container of certain height and width that holds a number of children (divs). I would like to have a 4px lightblue border around each div. Two neighboring divs should only have 4px space between them.
I'm able to accomplish this by manually setting the heights, widths, and margins/borders, but I'm sizing the children by percentage of the parent.
Here's a fiddle I have set up showing the divs in the parent, but without any spacing or border.
.container {
height: 300px;
width: 300px;
background-color: lightblue;
}
.left {
width: 30%;
height: 100%;
background-color: lightyellow;
float: left;
}
.top-right {
width: 70%;
height: 50%;
background-color: lightred;
float: right;
}
.bottom-middle {
width: 35%;
height: 50%;
background-color: lightpink;
float: left;
}
.bottom-right {
width: 35%;
height: 50%;
background-color: lightgreen;
float: right;
}
.border {
/* margin: 4px; */
}
<div class="container">
<div class="left border"></div>
<div class="top-right border"></div>
<div class="bottom-middle border"></div>
<div class="bottom-right border"></div>
</div>
http://jsfiddle.net/ymv0oave/
2px border for all divs, and 2px border for container.
.container {
...
border: 2px solid blue;
}
.container div{
box-sizing: border-box;
border: 2px solid blue;
}
https://jsfiddle.net/afelixj/mja5kfvw/
Putting the full answer here
.border {
/* margin: 10px; */
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:4px solid red;
padding: 4px;
}
.remove-right{
border-right: none;
}
Then put the class to your div class tag
<div class="container">
<div class="left border remove-right"></div>
<div class="top-right border remove-right "></div>
<div class="bottom-middle border"></div>
<div class="bottom-right border"></div>
</div>
You can use the calc() function is css to make use of % and still have an exact 4px border.
HTML:
<div class="container">
<div class="left border-right"></div>
<div class="top-right border-bottom"></div>
<div class="bottom-middle border-right"></div>
<div class="bottom-right"></div>
</div>
CSS:
.left {
width: 30% //Fallback for the 0.8% people still using IE7/IE8
width: calc(30%-4px); //HERE
height: 100%;
background-color: lightyellow;
float: left;
}
.top-right {
width: 70%;
height: 70% //Fallback for the 0.8% people still using IE7/IE8
height: calc(50% -4px); //HERE
background-color: lightred;
float: right;
}
.bottom-middle {
width: 35% //Fallback for the 0.8% people still using IE7/IE8
width: calc(35% -4px); //HERE
height: 50%;
background-color: lightpink;
float: left;
}
.bottom-right {
width: 35%;
height: 50%;
background-color: lightgreen;
float: right;
}
.border-right {
border-right: 4px solid lightblue;
}
.border-bottom {
border-bottom: 4px solid lightblue;
}
So I have a header and I'm not really sure how I should code the three element boxes that should be slightly below it, but still on the end of it, like the picture below:
One way, is perhaps position absolute and margin-top, or should I perhaps slice the images, so the top of the boxes is a picture with the header background...
.box {
position: absolute;
margin-top: -30px;
}
Or how should I do it?
Next time you should post some code of what you've tried. Against my better judgement, I made exactly what you drew.
http://jsfiddle.net/xD69h/
HTML:
<div id="a">
<span id="a-text">A</span>
<div id="b">
<span id="b-text">B</span>
</div>
<div id="c">
<span id="c-text">C</span>
</div>
</div>
CSS:
#a {
width: 100%;
height: 150px;
background-color: #EFE4B0;
border: 3px solid #FFABCA;
color: #B97A57;
}
#a-text {
float: left;
}
#b {
width: 200px;
height: 150px;
background-color: #7092BE;
border: 4px solid black;
border-radius: 5px;
color: #B97A57;
float: left;
margin-top: 50px;
margin-left: 50px;
}
#c {
width: 200px;
height: 150px;
background-color: #B97A57;
border: 4px solid #B97A57;
color: white;
float: left;
margin-top: 50px;
}