简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
html - How to write this kind of graphics with css3
某草草
某草草 2017-05-24 11:32:06
0
4
829

某草草
某草草

reply all(4)
为情所困
为情所困2017-05-24 11:34:06 4 floor

There is a task called chamfering in css3

Like +0
Add Reply
Ty80
Ty802017-05-24 11:34:06 3 floor 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<style type="text/css">
 *,body{ margin: 0; padding: 0; background: #fff; border: none; }
 .bg{width: 500px; height: 500px; background: rgba(253,181,43,1); padding: 12px; }
 .bg .write_box{ width: 500px; height: 250px; position: relative;background: #fff; overflow: hidden; }
 .bg .write_box .round{ width: 40px; height: 40px; background: rgba(253,181,43,1); position:absolute;  border-radius: 100% }
 .bg .write_box .lft{ left: -20px;   }
 .bg .write_box .rgh{ right: -20px; }
 .bg .write_box .botm{ bottom: -20px; }
 .bg .write_box .tp{ top: -20px; }
</style> 
    
    <p class="bg">
      <p class="write_box">
         <p class="round lft tp"></p>
         <p class="round rgh tp"></p>
         <p class="round lft botm"></p>
         <p class="round rgh botm"></p>
      </p>
      
      <p class="write_box">
         <p class="round lft tp"></p>
         <p class="round rgh tp"></p>
         <p class="round lft botm"></p>
         <p class="round rgh botm"></p>
      </p>
    </p>
</body>
</html>
Like +0
Add Reply
巴扎黑
巴扎黑2017-05-24 11:34:06 2 floor

Simply speaking, you need to achieve it through the border-radius of the circular p element and the overflow of the package. As for the deeper orange, it should be the shadow

Like +0
Add Reply
習慣沉默
習慣沉默2017-05-24 11:34:06 1 floor

I'm really sorry, I have always used firefox, but I didn't expect it to be different between radial-gradientand chrome. It’s also because I don’t understand it well enough.

I have modified the link below again.

================

Using CSS3 variables to control the radius size, I can’t think of a simpler way for now
I’m going further and further down the road of not being downwardly incompatible...

DEMO-New

====================================

Please see the DEMO for details. It is a pure CSS3 implementation without adding additional tags. Although I feel that the scalability is not high, it should still be able to be put into production with continued improvement.

There is a lot more magic in CSS3. If you think about it more deeply, you will come up with many interesting functions. Just like the author of "CSS Revealed".

DEMO

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！