CODEWITHSUNDEEP
htmlcss
rel1x
rel1x

Reputation: 2441

Align CSS arrow with the bottom center of the button

I have a "ticket" component. There are some information, button and a notification in some cases. And that notification has an arrow which I should align with the bottom center of the button. The problem is that the button has the different width because our website translated into a few languages and the button text length changes. I tied to find percentage but failed and I have no idea how to solve it.

The ticket structure:

    .ticket {
  border: 1px dashed gray;
  border-radius: 3px;
}

.ticket__content {
  padding: 0.5rem 1rem;
}

.button {
  border-radius: 3px;
  border: 0;
  padding: 1rem 1.5rem;
  background-color: darkslateblue;
  text-align: center;
  min-width: 180px;
  max-width: 100%;
  width: auto;
  display: inline-block;
  color: #FFFFFF;
  font-size: 1rem;
}

.notification {
  margin-top: 2rem;
}

.notification__content {
  background-color: gold;
  padding: 1.5rem;
  text-align: left;
}

.notification__arrow-container {
  width: 75%;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  position: relative;
}

.notification__arrow::after {
  top: -1rem;  
  right: 0;
  position: absolute;
  border-bottom-color: gold;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-right: 1rem solid transparent;
  border-bottom-width: 1rem;
  border-bottom-style: solid;
  border-left: 1rem solid transparent;
}

.align-right {
  text-align: right;
}
<div class="ticket">
  <div class="ticket__content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    <div class="align-right">
      <button class="button">Do it</button>
    </div>
  </div>

  <div class="notification">
    <div class="notification__arrow-container">
      <div class="notification__arrow">
      </div>
    </div>
    <div class="notification__content">
      Some notification
    </div>
  </div>
</div>

Is it possible to solve that problem without JS?

Upvotes: 2

Views: 1290

Answers (1)

Jesse
Jesse

Reputation: 3622

I think you're looking for this:

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

.wrap {
  text-align: right;
}

.button {
  border: 0;
  padding: 1rem 1.5rem;
  background-color: darkslateblue;
  text-align: center;
  min-width: 180px;
  max-width: 100%;
  width: auto;
  display: inline-block;
  color: #FFFFFF;
  font-size: 1rem;
  position: relative;
}

.notification {
  background-color: gold;
  padding: 1.5rem;
  text-align: left;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.notification::after {
      border-bottom: 5px solid gold;
      content: '';
      display: block;
      height: 0;
      width: 0;
      position: absolute;
      top: -5px;
      left: 50%;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
  }
    <div class="ticket">
      <div class="ticket__content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
        <div class="align-right">
          <button class="button">Do it
             <div class="notification">Some Notification</div>
          </button>    
        </div>
      </div>
    </div>

The trick is to put the notification as a child element of the button and position it absolutely, at the bottom center. Then adding an arrow in de middle of that notification will always put that arrow in the middle of the button.

Upvotes: 2

Related Questions