Div CSS with CSS [closed]

Navigation
1

I need to make a div that looks like the image below:

Itriedtodobackgroundimage,butitismoredifficulttoposition,asintheimagebelow:

Theproblemistomakethisareamarkedintheimagebelow:

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    background-color: #ffffff;
    border: 1px solid transparent !important;
    border-bottom-color: transparent !important;
    width: 150px !important;
    height: 50px !important;
    font-family: 'EurostileLTStd';
    text-align: center;
    color: #16824d;
    font-weight: 700;
    font-size: 20px;
    font-style: italic;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    margin-left: 15px;
    z-index: 1030;
    box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.44);
    opacity: 0.8;
}
    
asked by anonymous 06.12.2016 / 16:29

1 answer

3

You can use background: linear-gradient

You can do this to generate different ones in the background: 

background-color:#4fd8e8;
background-image: linear-gradient(to bottom, rgba(255,255,255,.1), rgba(255,255,255,.4), rgba(255,255,255,0), rgba(255,255,255,.4));

Reference: link

To create the arrow you can use the: before selector on the div and style the border as desired: 

suaDiv:before { 
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}

By using the border-style, border-width, and border-color properties you can change the border of the divs as you wish

If you have no problems with English you can follow this tutorial that will teach you how to create a menu exactly as you need it:

    
06.12.2016 / 16:35
Entity Framework 4 - Error Migrations: The type ... is not defined in namespace namespace.Map (Alias = Self) Insert ajax dynamic query result inside the input