我需要幫助來使用 css 創建像圖像中顯示的徽章，如雲或氣泡類型的徽章

Question

我正在從事某些產品必須顯示折扣的項目，所以我需要使用 CSS 的這種類型的徽章。

誰能幫我

謝謝你。

Answer 1

 a { text-decoration: none; } .firstLine { font-size: 24px; font-weight: 300; } .secondLine { font-size: 36px; line-height: 36px; font-weight: 600; } .thirdLine { font-size: 26px; line-height: 32px; font-weight: 300; } .fourthLine { font-size: 12px; font-weight: 300; position: relative; top: -10px; } .badges { position: relative; margin: 40px auto; width: 200px; height: 200px; background: #009700; border-radius: 100%; color: #fff; line-height: 25px; text-align: center; text-transform: uppercase; font-family: "Open Sans", sans-serif; -webkit-animation: 3s ease-in-out 0s normal none infinite running swing; -moz-animation: 3s ease-in-out 0s normal none infinite running swing; -o-animation: 3s ease-in-out 0s normal none infinite running swing; animation: 3s ease-in-out 0s normal none infinite running swing; -webkit-transform-origin: 100px -71px; -moz-transform-origin: 100px -71px; -o-transform-origin: 100px -71px; transform-origin: 100px -71px; } .badges:before { content: ""; position: absolute; top: 90px; left: 90px; width: 20px; height: 20px; border-radius: 100%; -webkit-box-shadow: 0px -82px 0px -2px #009700, 0px -100px #009700, 20px -98px #009700, 39px -94px #009700, 56px -85px #009700, 71px -72px #009700, 83px -57px #009700, 93px -40px #009700, 98px -20px #009700, 100px 0px #009700, -20px -98px #009700, -39px -94px #009700, -71px -72px #009700, -56px -85px #009700, -83px -57px #009700, -93px -40px #009700, -98px -20px #009700, -100px 0px #009700, 0px 100px #009700, -20px 98px #009700, -39px 94px #009700, -56px 85px #009700, -71px 72px #009700, -83px 57px #009700, -93px -40px #009700, -98px 20px #009700, -93px 40px #009700, 20px 98px #009700, 39px 94px #009700, 56px 85px #009700, 71px 72px #009700, 83px 57px #009700, 93px 40px #009700, 98px 20px #009700; -moz-box-shadow: 0px -82px 0px -2px #009700, 0px -100px #009700, 20px -98px #009700, 39px -94px #009700, 56px -85px #009700, 71px -72px #009700, 83px -57px #009700, 93px -40px #009700, 98px -20px #009700, 100px 0px #009700, -20px -98px #009700, -39px -94px #009700, -71px -72px #009700, -56px -85px #009700, -83px -57px #009700, -93px -40px #009700, -98px -20px #009700, -100px 0px #009700, 0px 100px #009700, -20px 98px #009700, -39px 94px #009700, -56px 85px #009700, -71px 72px #009700, -83px 57px #009700, -93px -40px #009700, -98px 20px #009700, -93px 40px #009700, 20px 98px #009700, 39px 94px #009700, 56px 85px #009700, 71px 72px #009700, 83px 57px #009700, 93px 40px #009700, 98px 20px #009700; -o-box-shadow: 0px -82px 0px -2px #009700, 0px -100px #009700, 20px -98px #009700, 39px -94px #009700, 56px -85px #009700, 71px -72px #009700, 83px -57px #009700, 93px -40px #009700, 98px -20px #009700, 100px 0px #009700, -20px -98px #009700, -39px -94px #009700, -71px -72px #009700, -56px -85px #009700, -83px -57px #009700, -93px -40px #009700, -98px -20px #009700, -100px 0px #009700, 0px 100px #009700, -20px 98px #009700, -39px 94px #009700, -56px 85px #009700, -71px 72px #009700, -83px 57px #009700, -93px -40px #009700, -98px 20px #009700, -93px 40px #009700, 20px 98px #009700, 39px 94px #009700, 56px 85px #009700, 71px 72px #009700, 83px 57px #009700, 93px 40px #009700, 98px 20px #009700; box-shadow: 0px -82px 0px -2px #009700, 0px -100px #009700, 20px -98px #009700, 39px -94px #009700, 56px -85px #009700, 71px -72px #009700, 83px -57px #009700, 93px -40px #009700, 98px -20px #009700, 100px 0px #009700, -20px -98px #009700, -39px -94px #009700, -71px -72px #009700, -56px -85px #009700, -83px -57px #009700, -93px -40px #009700, -98px -20px #009700, -100px 0px #009700, 0px 100px #009700, -20px 98px #009700, -39px 94px #009700, -56px 85px #009700, -71px 72px #009700, -83px 57px #009700, -93px -40px #009700, -98px 20px #009700, -93px 40px #009700, 20px 98px #009700, 39px 94px #009700, 56px 85px #009700, 71px 72px #009700, 83px 57px #009700, 93px 40px #009700, 98px 20px #009700; }

 <a href="#"> <div class="badges"><br> <p><br> <span class="firstLine">GET UP TO</span><br> <span class="secondLine">50%</span><br> <span class="thirdLine">off</span> </p> </div> </a>