I want to style a div and make it looks like a ticket with HTML and CSS, I tried adding circles at the 4 angles but it doesn't look good

Example

thank you

CodePudding user response：

honestly it looks good try adding a hole in the ticket and maybe a discontinued line in the middle this ticket may give you some ideas : https://i.pinimg.com/736x/f7/c1/25/f7c1251f522c610efc011446088b0299.jpg this is an exemple : codepen.io/hernandack/pen/gOWZvXX

CodePudding user response：

Would something like this work? It's a simplified version of the code you can find here https://webdesign.tutsplus.com/articles/quick-tip-create-pure-css3-ticket-like-tags--webdesign-3899

.ticket {
  height: 50px;
  width: 200px;
  background-color: #d5d5b9;
  position: relative;
  display: grid;
  place-content: center;
}

.ticket:after {
    content: "";
    position: absolute !important;
    top: 0;
    left: 0;
    border-right: #fff 7px solid;
    border-bottom: #fff 7px solid;
    border-radius: 0 0 20px 0;
}
 
.ticket:before {
    content: "";
    position: absolute !important;
    top: 0;
    right: 0;
    border-left: #fff 7px solid;
    border-bottom: #fff 7px solid;
    border-radius: 0 0 0 20px;
}

.ticket .inner:after {
    content: "";
    position: absolute !important;
    bottom: 0;
    left: 0;
    border-right: #fff 7px solid;
    border-top: #fff 7px solid;
    border-radius: 0 20px 0 0;
}
 
.ticket .inner:before {
    content: "";
    position: absolute !important;
    bottom: 0;
    right: 0;
    border-left: #fff 7px solid;
    border-top: #fff 7px solid;
    border-radius: 20px 0 0 0;
}

<div >
  <span >Ticker Here</span>
</div>

Make sure to tweak the numbers (mainly the border size and radius in the :after and :before) according to your needs.