How can I cut the full corner off a div, keeping it transparent.
This is what I've tried:
.well-corner {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background: rgba(8, 12, 23, 0.8);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
border-top-right-radius: 50px;
}
.well-link {
float: right;
}
.diagonal {
float: left;
width: 50px;
transform: skewX(-10deg);
}
<div class="well-corner clearfix">
<div class="diagonal">
</div>
<a class="well-link" href="">Test</a>
</div>
Outcome:
Wanted outcome (Image edited):
I have created a JSFiddle here:http://jsfiddle.net/x7fnxu2w/
demo - http://jsfiddle.net/x7fnxu2w/3/
use :pseudo element :before for styling the triangle used yellow border to hide the other part of the div
and used border style dotted to fix the pix-elated issue
body {
background-color: yellow;
}
.well-corner {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background: rgba(8, 12, 23, 0.8);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
border-top-right-radius: 50px;
position: relative;
width: 430px;
}
.well-corner:before {
content: '';
display: inline-block;
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
border-style: dotted;
border-color: yellow rgba(56, 59, 18, 1) transparent transparent;
border-width: 58px 53px 0px 0px;
}
.well-link {
float: right;
}
.diagonal {
float: left;
width: 50px;
transform: skewX(-10deg);
}
<!-- What I've tried -->
<div class="well-corner clearfix">
<div class="diagonal"></div> <a class="well-link" href="">Test</a>
</div>
<!-- Edited image, wanted outcome -->
<img src="http://i.gyazo.com/7cb269f66e7b0bd3870c8b04ac52f4cd.png">
svg solution without any CSS:
The entire shape could be achieved without any CSS if you use svg.
<body style="background-color: yellow">
<svg height="60" width="470">
<path d="M0,60 L50,0 L420,0 A56,56 0 0,1 470,60z" fill="#374418" />
<a xlink:href="#">
<text x="410" y="37" font-size="18" font-weight="500" fill="yellow">Test</text>
</a>
</svg>
</body>
CSS Solution:
You can add a triangle to the :before element.
body {
background-color: yellow;
}
.well-corner {
width: 430px;
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background: rgba(8, 12, 23, 0.8);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
border-top-right-radius: 50px;
}
.well-link {
float: right;
}
.well-corner:before {
content: '';
position: relative;
top: -39px;
left: -20px;
width: 0;
height: 0;
border-top: 0px solid transparent;
border-bottom: 65px solid transparent;
border-left: 55px solid yellow;
}
<div class="well-corner clearfix">
<a class="well-link" href="">Test</a>
</div>
<img src="http://i.gyazo.com/7cb269f66e7b0bd3870c8b04ac52f4cd.png" />
You can create a div and specify the border width and place it in the appropriate position
.triangle1 {
border-bottom: 58px solid #383B12;
border-left: 58px solid yellow;
font-size: 0px;
float: left;
line-height: 0%;
width: 0px;
}
.triangle2 {
border-bottom: 58px solid red;
border-left: 58px solid blue;
font-size: 0px;
float: left;
line-height: 0%;
width: 0px;
}
body {
background-color: yellow;
}
.well-corner {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background: rgba(8, 12, 23, 0.8);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
border-top-right-radius: 50px;
}
.well-link {
float: right;
}
.diagonal {
float: left;
width: 50px;
transform: skewX(-10deg);
}
<h1>This is what you want</h1>
<div class="triangle1">
</div>
<div class="well-corner clearfix">
<div class="diagonal">
</div>
<a class="well-link" href="">Test</a>
</div>
<h1>Here is how it works</h1>
<div class="triangle2">
</div>
<div class="well-corner clearfix">
<div class="diagonal">
</div>
<a class="well-link" href="">Test</a>
</div>
I have created a JSBin with your existing code and added two divs with classes triangle1 and triangle2 to demonstrate what you require and how it works
http://jsbin.com/vesoko/4/edit?html,css,output
Related
I am trying to create a netflix type scroll bar but the problem is that my images can scroll up and down instead of side to side. Like this.
look at bottom
I want it to go side to side
here is my css snippet
.movies {
background-color: lightblue;
border: 1px solid black;
background-color: lightblue;
border: 1px solid black;
height: 15rem;
width: 100%;
overflow-x: scroll;
}
.sinmovie {
height: 10rem;
width: 15rem;
}
.movies-div {
position: absolute;
margin-top: 45rem;
height: 3rem;
}
here is my html
<div class="movies-div">
<h1 class="movies-heading">Movies preview</h1>
<div class="movies">
<img class="sinmovie" src="./movies/large-movie1.jpg" alt="">
<img class="sinmovie" src="/movies/large-movie2.jpg" alt="">
<img class="sinmovie" src="/movies/large-movie3.jpg" alt="">
<img class="sinmovie" src="/movies/large-movie5.jpg" alt="">
<img class="sinmovie" src="/movies/large-movie6.jpg" alt="">
<img class="sinmovie" src="/movies/large-movie8.jpg" alt="">
<img class="sinmovie" src="/movies/large-movie7.jpg" alt="">
</div>
</div>
It may be a problem with my whole code
if you dont want to see if you know whats wrong skip!
here is my css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--maincolor: #124E78;
--divcolor: #F0F0C9;
--divcolortwo: #6E0E0A;
---seccondcolor: #F2BB05;
---thirdcolor: #D74E09;
}
body {
background-color: var(--maincolor);
}
.nav-bar {
background-color: var(---seccondcolor);
display: flex;
font-size: 2rem;
font-family: Gulzar;
border: solid 3px black;
height: 6rem;
border-bottom: 5px solid black;
z-index: 1;
}
ul {
display: flex;
list-style: none;
column-gap: 7rem;
padding-left: 20rem;
}
li {
border: solid 2px black;
width: 150px;
height: 50px;
justify-content: center;
align-items: center;
box-sizing: content-box;
text-align: center;
margin-top: 7px;
padding-bottom: 20px;
overflow: visible;
-webkit-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
}
.nav-bar:hover {
transform: scale(1.01);
background-color: white;
-webkit-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
}
li:hover {
transform: scale(1.1);
background-color: var(---seccondcolor);
transition-duration: 0.5s;
}
.first-page-look {
background: url(./images/movie-background.webp);
height: 43rem;
width: 100%;
background-size: cover;
border: 4px solid black;
border-right: solid black 10px;
border-left: solid black 10px;
position: absolute;
}
.first-page-look:hover {
transform: scale(1.01);
background-image: url("./images/movie-background.webp"), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
background-blend-mode: overlay;
}
a {
text-decoration: none;
font-family: Splash;
font-size: 1.2rem;
text-align: center;
text-transform: capitalize;
}
#main-page-button {
background-color: #6E0E0A;
position: absolute;
bottom: 10px;
font-size: 1rem;
width: 12rem;
height: 3rem;
margin-bottom: 4rem;
margin-left: 2rem;
color: white;
-webkit-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
}
#main-page-button:hover {
transform: scale(1.1);
background-color: black;
}
.main-page-par {
font: BebasNeue-Regular;
color: white;
position: absolute;
bottom: 200px;
margin-left: 3rem;
font-size: 1.5rem;
background-color: rgba(0, 0, 0, 0.5);
padding: 7px;
padding-left: 10px;
padding-right: 10px;
border-radius: 20px;
-webkit-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
}
.main-page-par:hover {
transform: scale(1.1);
}
#our-part-but {
background-color: #6E0E0A;
position: absolute;
bottom: 10px;
font-size: 1rem;
width: 12rem;
height: 3rem;
margin-bottom: 4rem;
margin-left: 15rem;
color: white;
-webkit-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
box-shadow: 8px 13px 18px 5px rgba(0, 0, 0, 0.75);
}
#our-part-but:hover {
transform: scale(1.1);
background-color: black;
}
.movies {
background-color: lightblue;
border: 1px solid black;
background-color: lightblue;
border: 1px solid black;
height: 15rem;
width: 100%;
overflow-x: scroll;
}
.sinmovie {
height: 10rem;
width: 15rem;
}
.movies-div {
position: absolute;
margin-top: 45rem;
height: 3rem;
}
pls help
the suggested addition of display flex to .movies creates this
look at bottom it creates it unnsesarily long page at bottom
you can use scroll-snap:
<style>
.movies {
width: 600px;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.movies > div {
width: 200px;
flex-shrink: 0;
box-sizing: border-box;
padding: 10px;
scroll-snap-align: start;
}
.movies > div img {
width: 100%;
}
</style>
<div class="movies-div">
<h1 class="movies-heading">Movies preview</h1>
<div class="movies">
<div>
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/cpWUtkcgRKeauhTyVMjYHxAutp4.jpg" alt="">
</div>
<div>
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/cpWUtkcgRKeauhTyVMjYHxAutp4.jpg" alt="">
</div>
<div>
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/cpWUtkcgRKeauhTyVMjYHxAutp4.jpg" alt="">
</div>
<div>
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/cpWUtkcgRKeauhTyVMjYHxAutp4.jpg" alt="">
</div>
<div>
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/cpWUtkcgRKeauhTyVMjYHxAutp4.jpg" alt="">
</div>
<div>
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/cpWUtkcgRKeauhTyVMjYHxAutp4.jpg" alt="">
</div>
<div>
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/cpWUtkcgRKeauhTyVMjYHxAutp4.jpg" alt="">
</div>
<div>
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/cpWUtkcgRKeauhTyVMjYHxAutp4.jpg" alt="">
</div>
<div>
<img src="https://www.themoviedb.org/t/p/w220_and_h330_face/cpWUtkcgRKeauhTyVMjYHxAutp4.jpg" alt="">
</div>
</div>
</div>
I'm trying to figure out how to beautifully group divs together to create more creative shapes outline. Basically I wanted to make a textbox with shared border. I've maded a ugly sample over THERE
.white-box{
width: 300px;
}
.white-box-tab{
position: relative;
left: 8px;
width: 45%;
height: 25px;
background: #fff;
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.1), -1px 0px 1px rgba(0, 0, 0, 0.1);
border-radius: 3px 3px 0px 0px;
text-align: center;
}
.white-box-tab:after{
content:'';
width:100%;
height:1px;
position:absolute;
background:white;
bottom: -0.5px;
left: 0px;
}
.white-box-body{
width: 100%;
height: 200px;
background: #fff;
box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1), -1px -1px 1px 0px rgba(0, 0, 0, 0.1);
border-radius: 0px 3px 3px 3px;
}
<div class="white-box">
<div class="white-box-tab">
The title
</div>
<div></div>
<div class="white-box-body">
</div>
</div>
However, the way I acheive it just feels quite ugly and unexpandable. Is there a better way to complete task like that?
I would simply do not apply bottom border to element and move it down by other div border width:
.white-box {
width: 300px;
}
.white-box .box {
border: 1px solid #ddd;
background-color: white;
}
.white-box .box.white-box-tab {
border-bottom: none;
position: relative;
top: 1px;
margin-left: 5%;
width: 70%;
z-index: 10;
}
.white-box-body {
height: 300px;
}
<div class="white-box">
<div class="box white-box-tab">
The title
</div>
<div></div>
<div class="box white-box-body">
</div>
</div>
I'm working on a Simon Says game and I'm having problems putting the title and buttons from the bottom into the middle of the controls section. I've tried different css styles but the divs don't seem to move.
Specially, margin-top to move the elements closer to the middle. Right now they are at the bottom of the page. Here's what I have so far. Any help appreciated. Thanks
body {
background: url("http://cdn.backgroundhost.com/backgrounds/subtlepatterns/purty_wood.png");
font-family: 'Righteous', cursive;
color: black;
}
.container {
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 70px;
}
.simonBoard {
margin: 0 auto;
/* margin-top: 100px; */
border: solid 10px black;
width: 600px;
height: 600px;
border-radius: 600px;
position: relative;
box-shadow: -10px 10px 7px 0px rgba(50, 50, 50, 0.75);
}
.pad {
margin: 0;
float: left;
position: relative;
width: 290px;
height: 290px;
z-index: 8;
border: 5px solid black;
}
.pad-green {
background-color:#0a0;
-moz-border-radius: 300px 0 0 0;
border-radius: 300px 0 0 0;
}
.pad-red {
background-color: red;
-moz-border-radius: 0 300px 0 0;
border-radius: 0 300px 0 0;
}
.pad-yellow {
background-color: yellow;
-moz-border-radius: 0 0 0 300px;
border-radius: 0 0 0 300px;
}
.pad-blue {
background-color: blue;
-moz-border-radius: 0 0 300px 0;
border-radius: 0 0 300px 0;
}
.board-controls {
display: inline-block;
border: 15px solid black;
height: 245px;
width: 245px;
border-radius: 150px;
background-color: white;
position: absolute;
z-index: 10;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
-webkit-box-shadow: -6px 8px 5px 0px rgba(50, 50, 50, 0.75);
/* -moz-box-shadow: -6px 8px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: -6px 8px 5px 0px rgba(50, 50, 50, 0.75); */
}
<div class="container">
<div class="header">
<h1>SIMON</h1>
</div>
<div class="simonBoard">
<div class="pad pad-green"></div>
<div class="pad pad-red"></div>
<div class="pad pad-yellow"></div>
<div class="pad pad-blue"></div>
<div class="board-controls">
<div class="title">SIMON</div>
<div class="display">07</div>
<div class="start">START</div>
<div class="strict">STRICT</div>
<div class="switch">ON/OFF</div>
</div>
</div>
</div>
body {
background: url("http://cdn.backgroundhost.com/backgrounds/subtlepatterns/purty_wood.png");
font-family: 'Righteous', cursive;
color: black;
}
.container {
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 70px;
}
.simonBoard {
margin: 0 auto;
/* margin-top: 100px; */
border: solid 10px black;
width: 600px;
height: 600px;
border-radius: 600px;
position: relative;
box-shadow: -10px 10px 7px 0px rgba(50, 50, 50, 0.75);
}
.pad {
margin: 0;
float: left;
position: relative;
width: 290px;
height: 290px;
z-index: 8;
border: 5px solid black;
}
.pad-green {
background-color:#0a0;
-moz-border-radius: 300px 0 0 0;
border-radius: 300px 0 0 0;
}
.pad-red {
background-color: red;
-moz-border-radius: 0 300px 0 0;
border-radius: 0 300px 0 0;
}
.pad-yellow {
background-color: yellow;
-moz-border-radius: 0 0 0 300px;
border-radius: 0 0 0 300px;
}
.pad-blue {
background-color: blue;
-moz-border-radius: 0 0 300px 0;
border-radius: 0 0 300px 0;
}
.board-controls {
display: inline-block;
border: 15px solid black;
height: 245px;
width: 245px;
border-radius: 150px;
background-color: white;
position: absolute;
z-index: 10;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
-webkit-box-shadow: -6px 8px 5px 0px rgba(50, 50, 50, 0.75);
/* -moz-box-shadow: -6px 8px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: -6px 8px 5px 0px rgba(50, 50, 50, 0.75); */
}
<div class="container">
<div class="header">
<h1>SIMON</h1>
</div>
<div class="simonBoard">
<div class="pad pad-green"></div>
<div class="pad pad-red"></div>
<div class="pad pad-yellow"></div>
<div class="pad pad-blue"></div>
<div class="board-controls">
<div class="title">SIMON</div>
<div class="display">07</div>
<div class="start">START</div>
<div class="strict">STRICT</div>
<div class="switch">ON/OFF</div>
</div>
</div>
</div>
I did set .board-controls's position:absolute.
And set .simonBoard's position:relative.
I think it is not good answer.
I would approach it by adding another div inside your board-controls div.
As follows -
<div class="board-controls">
<div class="control-menu">
<div class="title">SIMON</div>
<div class="display">07</div>
<div class="start">START</div>
<div class="strict">STRICT</div>
<div class="switch">ON/OFF</div>
</div>
</div>
and then add the following css -
.control-menu {
position:absolute;
text-align:center;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:50%;
}
This will make the new control-menu div a section in its own right and then the absolute positioning will try and pull it in each direction, therefore making it sit centrally inside the board-controls.
You can adjust the height that the menu sits using the height percentage in the supplied css.
Here is a JSFiddle displaying it working.
https://jsfiddle.net/jvshu3du/1/
As each div are nested you could either individually declare and style that or you have to change positioning of .simonBoard to relative and inside .board-controls to absolute then using top, left and translate you can align .simonBoard to center of page and same .board-controls.
body {
background: url("http://cdn.backgroundhost.com/backgrounds/subtlepatterns/purty_wood.png");
font-family: 'Righteous', cursive;
color: black;
}
.container {
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 70px;
}
.simonBoard {
border: solid 10px black;
width: 600px;
height: 600px;
border-radius: 600px;
box-shadow: -10px 10px 7px 0px rgba(50, 50, 50, 0.75);
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, 0);
}
.pad {
margin: 0;
float: left;
position: relative;
width: 290px;
height: 290px;
z-index: 8;
border: 5px solid black;
}
.pad-green {
background-color: #0a0;
-moz-border-radius: 300px 0 0 0;
border-radius: 300px 0 0 0;
}
.pad-red {
background-color: red;
-moz-border-radius: 0 300px 0 0;
border-radius: 0 300px 0 0;
}
.pad-yellow {
background-color: yellow;
-moz-border-radius: 0 0 0 300px;
border-radius: 0 0 0 300px;
}
.pad-blue {
background-color: blue;
-moz-border-radius: 0 0 300px 0;
border-radius: 0 0 300px 0;
}
.board-controls {
border: 15px solid black;
height: 245px;
width: 245px;
border-radius: 150px;
background-color: white;
z-index: 10;
-webkit-box-shadow: -6px 8px 5px 0px rgba(50, 50, 50, 0.75);
/* -moz-box-shadow: -6px 8px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: -6px 8px 5px 0px rgba(50, 50, 50, 0.75); */
position: absolute;
transform: translate(50%, 50%);
}
.title {
padding-top: 60px;
}
<div class="container">
<div class="header">
<h1>SIMON</h1>
</div>
<div class="simonBoard">
<div class="pad pad-green"></div>
<div class="pad pad-red"></div>
<div class="pad pad-yellow"></div>
<div class="pad pad-blue"></div>
<div class="board-controls">
<div class="title">SIMON</div>
<div class="display">07</div>
<div class="start">START</div>
<div class="strict">STRICT</div>
<div class="switch">ON/OFF</div>
</div>
</div>
</div>
First of all, the main issue is you are not clearing the floats that you are applying to the four pad divs. That is why when using floating containers, it is always said that we should properly clear the floats. The rest is easy.
Clear float by giving clear: both to the board-controls.
Now add position: relative to simonBoard and center the board-controls using this:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
(the queer thing is that clearing floats doesn't matter now though as you are using absolute position, but you should be doing it)
Now center the divs inside the board-controls by using line-height if you'd like that:
.board-controls > * {
line-height: 45px;
}
See demo below:
body {
background: url("http://cdn.backgroundhost.com/backgrounds/subtlepatterns/purty_wood.png");
font-family: 'Righteous', cursive;
color: black;
}
.container {
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 70px;
}
.simonBoard {
margin: 0 auto;
border: solid 10px black;
width: 600px;
height: 600px;
border-radius: 600px;
box-shadow: -10px 10px 7px 0px rgba(50, 50, 50, 0.75);
position: relative;
}
.pad {
margin: 0;
float: left;
position: relative;
width: 290px;
height: 290px;
z-index: 8;
border: 5px solid black;
}
.pad-green {
background-color: #0a0;
-moz-border-radius: 300px 0 0 0;
border-radius: 300px 0 0 0;
}
.pad-red {
background-color: red;
-moz-border-radius: 0 300px 0 0;
border-radius: 0 300px 0 0;
}
.pad-yellow {
background-color: yellow;
-moz-border-radius: 0 0 0 300px;
border-radius: 0 0 0 300px;
}
.pad-blue {
background-color: blue;
-moz-border-radius: 0 0 300px 0;
border-radius: 0 0 300px 0;
}
.board-controls {
border: 15px solid black;
height: 245px;
width: 245px;
border-radius: 150px;
background-color: white;
z-index: 10;
clear: both;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-box-shadow: -6px 8px 5px 0px rgba(50, 50, 50, 0.75);
}
.board-controls > * {
line-height: 45px;
}
<div class="container">
<div class="header">
<h1>SIMON</h1>
</div>
<div class="simonBoard">
<div class="pad pad-green"></div>
<div class="pad pad-red"></div>
<div class="pad pad-yellow"></div>
<div class="pad pad-blue"></div>
<div class="board-controls">
<div class="title">SIMON</div>
<div class="display">07</div>
<div class="start">START</div>
<div class="strict">STRICT</div>
<div class="switch">ON/OFF</div>
</div>
</div>
</div>
This question already has answers here:
transparent shape with arrow in upper corner
(2 answers)
Closed 7 years ago.
I have this custom shape made with css. I need to give a border to it but I have unsuccessful so far. How can I give it a border?
.comment-input-container {
width: 96%;
float: left;
}
input[type='text'] {
border: 0px !important;
box-shadow: none;
background-color: #f2f2f2;
box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1);
padding: 5px;
}
.arrow-left {
float: left;
width: 0;
height: 0;
border-bottom: 10px solid #fff;
border-right: 10px solid #f2f2f2;
}
<div style="width: 300px;">
<div class="arrow-left">
</div>
<div class="comment-input-container">
<input type="text" placeholder="Reply to comment..." />
</div>
</div>
Also, another problem is that the arrow and input break for smaller devices, that is, the input gets stacked underneath the arrow. Is there a better way of creating this shape that is also responsive and stays intact?
Thanks to Harry, I was able to work out a laregely responsive solution:
.comment-input-container {
position: relative;
width: 100%;
border-left: none;
/* not required as the shape needs to be transparent */
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.comment-input-container:before {
position: absolute;
content: '';
top: 0px;
left: -7px;
height: 26%;
width: 10%;
background-color: #f6f7fb;
border-top: 1px solid #e6e6e6;
border-left: 1px solid #e6e6e6;
-webkit-transform-origin: bottom right;
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
transform: skew(45deg);
}
.comment-input-container:after {
position: absolute;
content: '';
left: -7px;
height: 74%;
width: 5%;
max-width: 15px;
bottom: 0px;
border-left: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
background-color: #f6f7fb;
}
input[type="text"] {
border: 1px solid #e6e6e6;
border-left: none;
box-shadow: none;
background-color: #f6f7fb;
box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1) !important;
margin: 0px;
padding: 10px;
outline: none;
}
input[type="text"]:focus {
border: 1px solid #e6e6e6;
border-left: none;
box-shadow: none;
background-color: #f6f7fb !important;
box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1) !important;
padding: 10px;
outline: none;
}
.comment-box {
margin-left: 50px;
height: 50px;
}
<div class="comment-box">
<div class="comment-input-container">
<input type="text" placeholder="Reply to comment..." />
</div>
</div>
I assume the special shape is the last one? It's 0px x 0px, but you should see something since you gave it a 10px border. Unfortunately, The border is white so it blended in with the white background. I made the shape 1px x 1px and the background black so you can see the shape better.
body { background: black; }
.comment-input-container {
width: 96%;
float: left;
}
input[type='text'] {
border: 0px !important;
box-shadow: none;
background-color: #f2f2f2;
box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.1);
padding: 5px;
}
.arrow-left {
float: left;
width: 1px;
height: 0px;
border-bottom: 10px solid rgba(0, 0, 0, 0.0);
border-right: 10px solid #f2f2f2;
box-shadow: inset 4px 2px 22px 6px rgba(0,0,0,0.57);
outline: 2px inset rgba(0, 0, 0, .35;
}
<div style="width: 300px;">
<div class="arrow-left">
</div>
<div class="comment-input-container">
<input type="text" placeholder="Reply to comment..." />
</div>
</div>
I want to create a page like in image
Problem:
Main box Shadow not coming as in image.
I have tried with my own HTMl and CSS code.
Here is fiddle
http://jsfiddle.net/EE6hU/
HTML
<div class='wrapper' id='id_wrapper'>
<div class='main'> <span class='online_survey'>Online Survey</span>
<div class='login_box'>
<div class='login'>
<form>
<div class='label'>username</div>
<input type='text' name='username' class='loginInput' placeholder='moderator' />
<div style='clear:both'></div>
<div class='label'>password</div>
<input type='password' name='password' class='loginInput' placeholder='*********' />
<div style="clear:both"></div>
<input type='checkbox' name='remember' class='check' />
<div class='remember'>Remember me</div>
<input type='submit' name='submit' class='submit_button' value='submit' />
</form>
</div>
<div class='forget_pass'><a href='#'>Forget Password</a>
</div>
</div>
</div>
</div>
CSS
.wrapper {
background:#313131;
height:645px;
}
.main {
margin: 0 auto;
position: relative;
top: 20%;
width: 500px;
}
.online_survey {
bottom: 10px;
color: #FFFFFF;
font-size: 20px;
margin-left: 15px;
position: relative;
}
.user_name {
}
.login_box {
background: none repeat scroll 0 0 #7D7D7D;
border: 1px solid #98B2C9;
border-radius: 20px;
padding: 8px;
box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
}
.loginInput {
background:#313131;
border-radius: 5px;
float: left;
height: 30px;
width: 200px;
margin: 5px;
padding:5px;
color:#ffffff;
}
.label {
float: left;
height: 30px;
width: 140px;
}
.login {
padding: 30px;
}
.forget_pass a {
color: white;
text-decoration:none;
}
.submit_button {
}
.check {
float: left;
margin-left: 140px;
margin-right: 5px;
}
ge.
Stacking shadows of various sizes might get you close.
http://jsfiddle.net/isherwood/EE6hU/1
.login_box {
box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75),
0 0 150px rgba(255,255,255,0.5),
0 0 250px rgba(255,255,255,0.5);
}
I may have to eat my own words. Here's a way to get the narrower white shadow in your image:
http://jsfiddle.net/isherwood/EE6hU/4
.login_box {
...
box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
margin: 0 -150px;
}
.login_box_shadow {
overflow: visible;
border-radius: 20px;
box-shadow: 0 0 150px rgba(255, 255, 255, 0.5),
0 0 250px rgba(255, 255, 255, 0.5);
margin: 0 150px;
}