How would you create such corner arc using css?
This is starter template: https://codepen.io/anon/pen/rwraXG
I was hoping that I would be able to use black outer div and red inner div, and use border radius to leave just the top left corner showing through. I messed something midway.
.bar {
width: 100px;
height: 20px;
background-color: red;
}
.outer {
height: 100%;
width: 8px;
background-color: black;
}
.inner {
height: 100%;
width: 100%;
background-color: red;
border: 2px solid black;
border-radius: 15px 0px 0px 0px:
}
<div class="bar">
<div class="outer">
<div class="inner"></div>
</div>
</div>
Modified your codepen: https://codepen.io/anon/pen/dRjoow
Essentially, it was a syntax error. You had a colon (:) at the end of your border-radius property like this:
.inner{
...
border-radius: 15px 0px 0px 0px:
}
instead of a semi colon (;) like this:
.inner{
...
border-radius: 15px 0px 0px 0px;
}
so it wasn't rendering.
fiddle: https://jsfiddle.net/m8wf66u6/
HTML:
<div class="outer">
<div class="inner">
</div>
</div>
CSS:
.outer {
height: 200px;
width: 400px;
background-color: black;
}
.inner {
height: 100%;
width: 100%;
background-color: red;
border-top-left-radius: 20px;
}
The only problem is the : at the end of the last line.
border-radius: 15px 0px 0px 0px;
Note that you can also use :
border-top-left-radius: 15px;
I suggest you to do it with 2 DIVs as below:
HTML :
<div class="outer">
<div class="inner"></div>
</div>
CSS :
.outer,.inner{
width:200px;
height:80px;
}
.outer {
background-color:black;
}
.inner {
background-color:red;
border-radius:20px 0 0 0; /* numbers are : top left bottom right*/
}
https://codepen.io/FaridNaderi/pen/pwZJyP
Hope it helps
It is possible to do this with the inner and outer boxes as you have. You would change your css to the below. You don't need to declare the color red on '.bar' because your '.inner' div will be the red portion of this.
.bar{
width:200px;
height:100px;
}
.outer{
height:100%;
width:100%;
background-color:black;
}
.inner{
height:100%;
width:100%;
background-color:red;
border-radius: 20px 0 0 0;
}
As long as your parent div ('.bar') has a set width and height '.inner' and '.outer' can have width and heights of 100%.
*Please note though that the higher you make '.bar' the better the top left tab will look.
Related
When customizing the scrollbars of an element, I end up with this negative space in the bottom right corner whose dimensions are equal to the width and height of the scrollbars. I can't figure out how to set a background color for it.
Here's a pen that depicts the problem
<div class='container'>
<div class='content'>
</div>
</div>
.container{
border: solid red 10px;
height: 300px;
width: 200px;
overflow: auto;
&::-webkit-scrollbar{
width: 5px;
height: 5px;
background: black;
}
&::-webkit-scrollbar-thumb{
background: white;
border-radius:10px;
}
&::-webkit-scrollbar-track{
background: darkred;
}
}
.content{
background: darkred;
height:500px;
width: 500px;
}
Add this to your CSS
&::-webkit-scrollbar-corner{
background: darkred;
}
Codepen:
https://codepen.io/anon/pen/mYeZBx
My code:
#Parent {
border-radius: 8px;
background-color:#cccdce;
width:70%;
height:500px;
float:left;
}
#child {
padding:15px;
border-radius: 8px;
background-color:blue;
width:100%;
height:20px;
float:left;
}
<div id="Parent">
<div id="child">
<div>aaaa</div>
</div>
</div>
What I now have is:
I want to know why padding is not working? Isn't padding is supposed to set the space between parent and child element? Why it is not working and overlapping?
I want to do this:
use flexbox and remove floats, and FYI your padding needed to be set in parent not child
#Parent {
border-radius: 8px;
background-color: #cccdce;
width: 70%;
height: 500px;
display:flex;
padding: 15px;
}
#child {
padding: inherit;
border-radius: 16px;
background-color: blue;
height: 20px;
flex:1
}
<div id="Parent">
<div id="child">
aaaa
</div>
</div>
Check this out.
#Parent {
border-radius: 8px;
background-color: black;
width: 70%;
height: 500px;
padding: 15px;
}
#child {
border-radius: 8px;
background-color: white;
padding: 15px;
height: 470px;
}
#grand {
border-radius: 8px;
background-color: blue;
width: 100%;
height: 20px;
}
<div id="Parent">
<div id="child">
<div id="grand">aaaa</div>
</div>
</div>
It would help if you give padding to the right element. Right now you are assigning 15px padding to the child. That's the reason why there is 15px space between the text and the child. If you add a padding to the parent-id, you create "space between parent and child element":
#Parent {
padding: 15px;
}
You can move your padding to the parent and remove the floats. This will give you the expected result.
Due to my website designed, i need to join two divs, and they need to look as one.
So no borders, and everything white, they look the same div.
Now i need to add a shadow, and things get complicated!
So far i achieve this, but i cant figure it out how to make it look nice!
#one {
height: 300px !important;
width: 300px !important;
float:left;
box-shadow:-1px 1px 1px 0px #888888 !important;
}
#two {
float:right;
height: 300px !important;
width: 300px !important;
box-shadow:1px 1px 1px 0px #888888 !important;
}
#wrapper{
width:600px;
}
<div id="wrapper">
<div id="one">The two divs are</div>
<div id="two">next to each other.</div>
</div>
I need to remove that line in the middle, and also at the bottom you can se a little gap.
Please help!
As has been mentioned in the comments, you should be looking to apply the box-shadow on the container and not on the inner elements. That would allow to display as if the shadow effect was applied on a single element. I guess that is what you are looking for. See the snippet below.
#one {
height: 300px;
width: 40%;
float:left;
}
#two {
float:right;
height: 300px;
width: 40%;
}
#wrapper {
width:100%;
box-shadow: 2px 2px 5px 3px #888;
}
.clear {
clear: both;
}
<div id="wrapper">
<div id="one">Left-floated</div>
<div id="two">right-floated.</div>
<div class="clear"></div>
</div>
Again, if you are looking to make the div's perfectly align next to each other without any blank space in between, you can remove the width property from both the inner and outer elements and add display: inline-block;. This would ensure that the outer as well as the inner containers
only take up as much space as needed horizontally. See this below :
#one {
height: 300px;
display: inline-block;
float:left;
}
#two {
float:left;
height: 300px;
display: inline-block;
}
#wrapper {
display: inline-block;
box-shadow: 2px 2px 5px 3px #888;
}
.clear {
clear: both;
}
<div id="wrapper">
<div id="one">The two divs are </div>
<div id="two">next to each other.</div>
<div class="clear"></div>
</div>
The below snippet is just an example of how the outer container would expand based on the content it contains:
#one {
height: 300px;
display: inline-block;
float:left;
}
#two {
float:left;
height: 300px;
display: inline-block;
}
#wrapper {
display: inline-block;
box-shadow: 2px 2px 5px 3px #888;
}
.clear {
clear: both;
}
<div id="wrapper">
<div id="one">Just random text to increase width The two divs are </div>
<div id="two">STILL next to each other.</div>
<div class="clear"></div>
</div>
Hope that helps!!!
initially in my chat application the reply on a chat is hidden and shows only count on the red box when user clicks on red button it shows all the reply by other users and in the end a input box for reply, all inside the blue box. How I can draw this shape using CSS.
Here's an example FIDDLE.
Spend all of your time playing with the CSS in the upper right hand corner, and watch what happens.
CSS
.holder {
width: 500px;
height: 400px;
border: 0px solid black;
}
.upper {
height: 30%;
border: 0px solid red;
}
.littleblue {
height: 100%;
width: 35%;
background-color: blue;
border-radius: 20px 20px 0px 0px;
float: right;
}
.littlered {
width: 90%;
height: 40px;
background-color: red;
margin: 10px auto;
border-radius: 20px;
}
.lower {
height: 70%;
background-color: blue;
border-radius: 20px 0px 20px 20px;
border: 0px solid green;
}
basicly with a form and 2 fielset :
<div>
<form>
<fieldset class="right">
<button>button</button>
</fieldset>
<fieldset>
</fieldset>
</form>
</div>
div {
width:50%;
margin:auto;
}
fieldset {
background:blue;
clear : right;
height:100px; /* remove height once content in */
border:none;
border-radius:1em 0 1em 1em;
}
.right {
float:right;
border-radius:1em 1em 0 0;
height:50px;/* remove height once content in */
position:relative;/* to set pseudo element where you want */
}
.right:after{
content:'';
height:2em;/* use he twice value and units used for radius */
width:2em;
position:absolute;
left:-2em;
bottom:0;
border-radius:2em;
box-shadow: 23px 23px 0 10px blue;/* drop shadow to draw inside round corner */
z-index:-1;
}
http://codepen.io/anon/pen/vIgon/
I have a three column site that will display all three columns or just one. If it displays just one column, my example below is the column it will be displaying. This intro wrapper is the center column that needs to grow in the event that the columns to the left and right of this wrapper are not present. Specifically, the first div in the intro wrapper. The second div has a static image in it and should not change.
I've used min/max-width but the content never reaches the maximum but rather stays at the minimum.
.intro is the wrapper. The min-width for this wrapper should be 801px and can grow up to a max of 1200px. The first inner div (.intro-left) should be a minimum of 531px and can grow up to a maximum of 979px.
Can someone have a look and tell me where I'm going wrong?
Here is my code.
.intro{
float:left;
min-height:200px;
width:801px;
padding:10px 0;
}
.intro .intro-right{
display:inline;
float:left;
height:200px;
width:250px;
background:#ccc;
}
.intro .intro-right img{
height:190px;
width:240px;
margin:5px 0 0 5px;
border:1px solid #777;
}
.intro .intro-left{
display:inline;
float:left;
width:531px;
min-height:200px;
margin-right:20px;
}
<div class="intro">
<div class="intro-left">
<h2>Test</h2>
<p>test</p>
</div>
<div class="intro-right">
<img alt="" src="1.jpg">
</div>
</div>
display:table solves your issue,. here is the CSS, ive made some changes while testing that you may want to remove.. such as making the left div resizeable so that you can see it work in action.
div.intro {border:2px dotted red;
min-height: 200px;
max-width:1200px;
min-width:801px;
padding: 10px 0;
margin:0 auto;
display:table;
}
.intro-right, .intro-left{display:inline-block;vertical-align:top;}
.intro-right {
height: 200px;
width: 250px;
background: #ccc;
outline: 2px solid green;
}
.intro-right img {
height: 190px;
width: 240px;
margin: 5px 0 0 5px;
border: 1px solid #777;
}
.intro-left {
width: 531px;
height: 200px;
margin-right: 20px;
outline: 2px solid blue;
resize:both;
overflow:auto;
}