I've been working on creating a webpage that looks similar to the image provided. I've managed to get about 90% of it done, but there are a couple of issues I'm facing:
- How can I create a square with a triangle at the bottom as shown in the image? I know how to make a square using borders, but adding the triangle at the bottom is my challenge.
- How can I make the content scrollable? Currently, the content is not scrolling even after using overflow:auto and scroll.
.bg {
background: #597A4D!important;
width: 100%!important;
}
.nav_bar {
background: #597A4D!important;
border-style: none;
height: 44px;
border: 0px!important;
border-radius: 0px!important;
}
.display_menu li a{
font-size: 1.2em!important;
color: #ffffff!important;
}
ul.display_menu li:last-child{
background:#3C86D7;
}
.rowClass {
display: block;
margin-top: 3%;
}
.rowClass >div {
padding: 3em;
text-align: center;
}
.text_row div{
display: block;
border: 1px ;
padding: auto;
color: #ffffff;
margin-top: 3%;
}
.rowClass span {
display: block!important;
color: #ffffff;
}
.logo_image{
width: 60px;
height: 60px;
}
.email_div label {
color: #ffffff;
font-weight: bold;
text-align: center;
}
.email_div{
width: 50%;
margin: auto;
}
.email_div label {
}
.email_div input {
background: transparent;
border: 1px solid #3C86D7;
display: inline;
width: 50%;
}
.email_div button {
display: inline;
}
.wrapper{
overflow: auto!important;
overflow: scroll!important;
}
For reference, here is the link to my Plunker: http://plnkr.co/edit/G8mp53rQlF562hEkgmgT?p=preview