券码锯齿状样式
不说废话;直接上来就撸码~~~
<!DOCTYPE html>
<html>
<head>
<meta charset=;utf-8;>
<title>css实现券码锯齿状样式</title>
<style type=;text/css;>
.con{
border: 1px solid #EEE;
border-radius: 10px;
display: flex;justify-content: space-between;align-items: stretch;
width: 450px;height: 100px;
Overflow: hidden;
font-size: 14px;
}
.con_l{
background-image: url(;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAABSCAYAAADHLIObAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8;IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MThERTM1NEJGMUY0MTFFN0FEQ0U5NjZFNDIwMkM1NkMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MThERTM1NENGMUY0MTFFN0FEQ0U5NjZFNDIwMkM1NkMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxOERFMzU0OUYxRjQxMUU3QURDRTk2NkU0MjAyQzU2QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxOERFMzU0QUYxRjQxMUU3QURDRTk2NkU0MjAyQzU2QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp5mMHsAAAx2SURBVHja3F0LmFVVFd5cZmBA1IFRIFFEMMEkGp7yElOJ0Mwgi0IpLV6Z2otIHkVQaSWEmJ98;SJBEqRMKQRKjYciIGEiSGogmMoAQuKL4aXT;pn/wJ5197n3nHPPufNY3/d/c/e;55y7zzp7PffaZ;qVl5ebaqb6gnaCLoLzBJ8QnCo4TdBE0JjHYaD7BTsFewWbBP8R/FPwkuBgdQy;qKjo6N961cTIboKvCnoLWgta5Xi93YL/CtYLHhUsrcuMBNO;IujL2ZckYaauECwSLKwrjLxeMEjQP8Q5ENN3KcL4XCFoKDhJUCw4IcS11pGhM3jNWsfIbwjGUO9loueo4yCamwVbiHcdeq8;mdlW0EZQSrVwtuCCLL;zR/BrwSzB/2oDI4cIJgo6;Xz/gWCJYA112Ysx/e6Zgs8JzhdcJDjD5zgwcZLgzprKSAx8KvWgizDb/iiYSeOQJBUKRlIqumWQhNG0;jWGkcMoMoWO7zDzfpW00s9AmKE/Flzu8/0UweSawMh5dGU0baehWWxqBkGf/o6M1QS3aSD1aCRGpnIYWAvBBgcTYWHHCs6pQUwEPS/oKRhKb8CmrjR4vaJePCojoXf;7TAoqwQfF0wTHDY1k;ZzjPer/hLBM4Kv5YuReGorBU1V/810treamk9v0xCNdHw3h98lykiIxjJBI9U/igq9ttG9gk87/MpZYZkZxth0pQUusPpw8mWC5aZ208c4Qdqr/i8L/hSn1Yb;2CFoYPUdInM3mbpBDWk82ztU2Zq4rPbTDiZ2q0NM9OL7UhpRm57iRMpZRz4k6KD6oFc2mrpHBzgD7eRGQZDoJxsjhzJ2tmmEYHWebuxa3sSaAEmJuOgdQT/VhwTJHVGNDVJV76u;aXS2o1BfDvA3Jlg2Gw/xQau9hf5fkJgfPiKy67cKHs4h;fKQw39eH1ZHzlPtZ3Ng4lDqGviafwl4znDVLgt43gOCiwU9aHG/G3HMCwRzVd9CGqXAoo248/Oq79IcxGWi9XmA4OoA52i9vCLAORD/C1XflhxVyw6r3crPX3YxEslTnasbZ3JLho5T7Rl;T5Z0rklfxwmil2erNpIUj;Uw7g/pS;pJ0TIIIyGGba32PlOZWc6FFqkExinUX37kSgpnSwB/S3CW1d4muC4G44P4;3HbrgjGBzE2EIV2VvuimCKXYopJIyW;LzuOhS6dYLVfo;X0Iyzdvul4GHG5aCea9PUe8OhVP2MzXDFxc4zhn2tmz/c59irVzrYssFa1x8Ts577nyBaNzTQj4a;dr4zO32L205Bq660SITYj;inDspeqIJN3YedE4V79MAH/sqmyE8ggtZAZedioBEQXxcSyHJjY18eYYOFrnWLkfKazKtieoNWP5RfWU4aghK6OFrm5jgyVd636dMWmhbwnMO5JwSUWY0d50mLPyNsF37FOjLqWMTWhGRE3DVBGJAj1Yd7Bo8dlRg7QOrK/mjlRLfXAWhJXnxJRLW2w2hceOHCgxBZtr3jJoydMZa4xCmH6d8xTtgbhX4sI574h;GvE38Us/hQ/IyN2jWC6x8hRDs5HpTF0V1pYei8IvSX4vuB0yw;ET/sRr3MSb76xpe;m69g3D/SwUl2DMQ5PR2KxvLP2kfI8wAIys9gKz2Y73CW7AGGXK8rIA221gpbdoidbpCyH1qMN1cBELwQstmbjbMcxOhrCrP9RNY3Vo;aiJ9umyFlbzzxfDQPrY6qWlkzxOQ6SM0f1wSienOfxvq7a/VImvfJgVzUw0s47LvWZjR5d49CLq/I8Xv37vQocCYLNeR7ULaayatfQQEynNWyYIVz7tuAf5nidJLyOB;jsB12HwvVRonJfhDHrpYf2YOQ5qjPqghayLxfQmgax1h8x;rhSRR6/p4XORLsZodg0jAhLiOiuD3nOdkqupxKbwmqvZrzr3VxLWs8w1Myk19PUFnrTcrnCGhyPb69iRp6qfLm3I1y0sIYxZwtj82wl0uWO2D4o7bQ;Ny7gD9qB;ZEIF91F69nH0nUuwrVR4nyZeoCG;m1/CB1XQd;zt;M7JCWG85gTs0RHhyIy0p5wDQqsSMG7cFQaF/A4FHzq9SBkUG6I;Luo0Znl6AN9k8YpqRD1mESm1AyoSFjkxjDMa6ZCrhtyuCaM03gfBpdZcXGSVC/FTI/tEiRFWBqd5uj7UgzXRmn1REd/SwYYkxK4H9suHEpRL3mkk6dxUE86sFeq/p;b9BW6XP1Rv5mNSAkZra4x/p6tew/D/Vlvju/EOkLfKK59KIiNx/roUzjCrWKQAu/Bl9GQdeSDa;Bz/F2cobnurFhpjpfRbIex2WExsoA3lysjYZUnC7r7fNcggq8ahF6kc41ICXnDTzqOGc0M0i8ZDZVF/K3W1ucPUia9EqFDDjeCB4J6mcccTHyZYr4kYlgWhBAqLudvI/T9g89xxXTXtvro1myEwtQzrfa;lCO2jpLdRmQwlSI1xPH9Is4Ob7UwKUYadf1h1Jvv;ByHEPUXHHsY0p7AUdHWpSCnRRj4QuPe8QqnFfnCe1X/TaZyF5hOf2FZdYTVnmaCbRmGqNqF9c2p63fRR0V2aaZx7wcCfdaEKxDrocPFAs7IfeZ4UrV9BEae5eiDv/h1XjtIBsWY9BrI20zVIiY/epJeQTM12;wHimWLGURPdX7Y0pY2OpJKMVHxhp1bM;FX2O6yPr9gKlcSr8jARD8aopIJQQ0BMkH2vp4PfUK/tby/S6mGyqkjw;YzO6uHtLHAinM7WpZ7CEUhKCGyWMwoaUVEvYabO1fF3kEjrUJTtdjh/SzJl6VESYSsFcZYarVR/1PhhYdzHE50WHoqByYauiP6ekGpocoZ7DXBlpOjpP50EPF3Y8XZy5V4fybPaa;ByhKWOwxUJmqqdGKSyyW6ROYeoxIWT6gYDWSemIiZ9GeH;xLmtQk6MZvUfnAsU9sVwWtFrLdpRi5QJ/0gT4xcpWbTQfp2YW9Qu11J0GTVXuJ9SKnOl1SEk2TpSROqlFLVf20E0eyehxlZT2WqDtkGWWejdRX/7QkxEZZvk0kvnEdINz/C9S5R7SR2pP1EUKT85GP5Al1o2oRG52QlNnFWXkyh71bf4VT3j3A9134gBAjbY2bkfqWCju5R9Ct9xoBucYR/cdCNpvLFRpMcTFycgYnXUTcNdoSvMFSPqr6tCTDxDsVEZPWrbPR0FeMjYfm6mpVfFDwSYQCdmDgY6JPSMkwY;NXvwHO422ofodjuZETWxaQXUc004depM1Er5RqCUAJ5dPOnNyMLHCe;xxuzw74HjbuU2I/g0N/s8LlsQrHWBJP5vRdXqHaBwziZhPX6ItW;36TvoPVd;rxbKewiU7U;JxuNy8BEiN1PyZBsLw;ZF;I3D1JyXomRiZPUgzvsJz2ZNnXCyOik7wgTLJc4yaRXlG2kRb7VhFs770mrXEodWUID04AuyB5mkuB7vhYjExFp6cq8q/TDDfoGgZ/R7OsbW5tlEMgeLeNfMA8p/edivMkUxfwIdWXc1JQ;dXOrD0sXA/SBYV7FABE/T7kBrQMG/IWm5r62JhP9S4l0BT2EA36MTAUUrf3K5Vijsi1;VBuZ;IjDoPV0MTGIsdG;pd5RfzZFtcDULYJPOkj1oYbo2SC6Jgghm6z3WLenCJTUESYiA/UFh42YFVRpByW4P/qlQkhqYC25Ry1mIAziakZONv2WbpqJm5GeM6pfkdCCVvzqWsjEXub4y;e0Ux/qFQ5R3o2GqT7U0T;X0dAJtYSJeKXCMyb9TQUQ5;;FvVgu749EUekSk17IichllAm/YTJf1ImRm;s9kqNVbJ;V4nh/JDLbHUzVZDCojalcEFpoohUbJEVF1HsbHEyEZ9I3LBNzFW2bsHiPJO1tPgkH5DHvMVULjvJN2CEx2VTuJrvRJynRzuS4VyfOlxVfTKa1dXyHUA6FVXfmUeQ7k3GDTPq7Lg3jdKig2TlN84Ren41U201U5PV9jllNJQ/n9;mYmVdKSYA1zrRvHA90uokh85/0C90R;aAQfnyW416hU7;NGZwXmMEJstOgFTM03Sia8Gmz/esC1JvfZ2LccpevfzEA/YmyOuQJg24Hxgoi0ncodn2LTEXSAGmzYkZSUB;nB9TxyFMuIBOXxW7B8vxPLxrRtcCq4eV5itHBtJW0xDuS;pHq/DcsZzAcG8yZFZdFL6MPC9cLuyXy8pLQ6v5/Nse8BiY/EKJ1p18K0W1MRx/iXGhZfog5trNg0HuoW9cxRIV;zXvazmPk/wUYACgi5XvbeWYQAAAAAElFTkSuQmCC;);
background-repeat: no-repeat;
background-position: -14px -14px;
color:orange;
font-size: 2.2rem;
width: 120px;line-height: 100px;
text-align: center;
}
.con_m{
flex: 1;
box-sizing: border-box;
padding: 10px;
color: #999;
}
.con_m div:nth-child(1){color: #555;font-size: 1.1rem;margin-bottom: 8px;}
.con_r{
display: flex;
align-items: stretch;
width: 150px;
}
.con_r_line{
background: radial-gradient(transparent 0, transparent 5px, #ff6769 5px);
background-size: 14px 12px;
background-position: 7px 0;
width: 9px;
}
.con_r_box{
flex: 1;
background-color: #ff6769;
display: flex;align-items: center;justify-content: center;
}
.con_r_box span{
background-color: #FFF;
padding: 5px 10px;border-radius: 5px;
color: #ff6769;
}
</style>
</head>
<body>
<div class=;con;>
<div class=;con_l;>85折</div>
<div class=;con_m;>
<div>全部门店可用</div>
<div>中秋福利</div>
<div>自领取30日有效</div>
</div>
<div class=;con_r;>
<div class=;con_r_line;>
</div>
<div class=;con_r_box;>
<span>立即领取</span>
</div>
</div>
</div>
</body>
</html>