Stylized Div with CSS

Asked

Viewed 398 times

1

I need to make a div that has the appearance of the image below:

inserir a descrição da imagem aqui

I tried to do with background image, but it is more difficult to position, as in the image below:

inserir a descrição da imagem aqui

The problem is to make this area marked in the image below:

inserir a descrição da imagem aqui

.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;
}

html css3 nav-bar
  • 2

    Cool, and what did you try? Edit the question and include your code, even if it’s wrong.

  • Lamppost html, css and js

1 answer

3


You can use the background: linear-gradient

You can do so to generate different 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:http://tableless.com.br/como-usar-gradient-no-css-de-forma-consciente/

To create Arrow you can use the :before selector in the div in question and style the border as you wish:

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;
}

Through the border-style, border-width, and border-color properties you can change the edge of the Divs however you want

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: https://css-tricks.com/tabs-with-round-out-borders/

  • Actually it is not even the gradient that is giving me trouble. See the first image, the top has a "reverse" border-Radius. This is a Nav-bar.

  • I put some practical examples of how to use the gradient, and the before selector to manipulate the edge

  • 3

    This is the big problem of answering when the question is not very clear or even broad. The ideal in this case is a closing vote on the question until the author explains better what he wants, to avoid investing time and the answer does not serve. Your good intention to help ends up being wasted for lack of detail in the question.

  • I provided some links to help you believe that the latter is the closest thing to what he needs, but as he did not specify exactly what he wanted not to waste time making practical examples

  • Thank you Leo Letto for having responded. I think the examples you sent on the link will help me a lot. To the hotheads on duty, when they see a confusing question, you don’t have to answer, if it’s going to get in the way of your precious time.

  • @When you have questions try to put as much of your code as possible so it makes it easier for people to understand what you want and answer you more accurately, is that stackoverflow is a little objective in the answers, Open questions are usually discussed in the chats area

Show 1 more comment

Browser other questions tagged html css3 nav-bar

You are not signed in. Login or sign up in order to post.