Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
394 views
in Technique[技术] by (71.8m points)

html - How to squircle an app icon image with just CSS

I've been banging my head against the wall trying to figure out how to use The Code Player's CSS3 Squircles example to create an iOS-7-style app icon on my website (testing in the Safari browser). The example uses pseudo tags to clip the background color, whereas I need to crop around an <img>. In case you're not familiar, a squircle is like a rounded-rect, but with the sides rounding beyond the corner radius, like so:

a squircle

.icons img {
  width: 100px;
  height: 100px;

  border-radius: 24%;
}

.icons a {
  text-decoration: none;
  display: inline-block;
  position: relative;
}
/*Now we will create fish-eye shapes using pseudo elements and clip them to add a curve to the sides of the icons*/
.icons a:before, .icons a:after {
  content: '';
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  background: inherit;
  border-radius: 100%; /*circle*/
  /*time to transform the circle into fish-eye shape. iOS7 style now.*/
  -webkit-transform: scaleX(2) scaleY(1.05);
  transform: scaleX(2) scaleY(1.05);
  /*clipping the left and right sides - 17px from the left and right*/
  clip: rect(0, 66px, 100px, 34px);
  /*pushing it behind the icon*/
  z-index: -1;
}
/*duplicating the :before element and rotating it 90deg and swapping the X/Y transforms*/
.icons a:after {
  -webkit-transform: scaleY(2) scaleX(1.05) rotate(90deg);
}
<div class="icons">
  <a href="#"><img src="http://lorempixel.com/256/256/abstract/2/" /></a>
</div>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The easiest solution might be to create the image with a transparent background until some of the following features are implemented.

If you can add the image via CSS then you could just add height, width, background-image and background-size to the link (.icons a).

Note: This might not be the desired effect as it is complemented by a background colour.

.icons a {
      height: 100px;
      width: 100px;
      background-image: url(http://lorempixel.com/256/256/abstract/2/);
      background-size: cover;
      text-decoration: none;
      color: white;
      display: inline-block;
      margin: 20px;
      border-radius: 24px;
      position: relative;
    }

    .icons a:before,
    .icons a:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: 100%;
      -webkit-transform: scaleX(2) scaleY(1.05);
      transform: scaleX(2) scaleY(1.05);
      clip: rect(0, 66px, 100px, 34px);
      z-index: -1;
    }

    .icons a:after {
      -webkit-transform: scaleY(2) scaleX(1.05) rotate(90deg);
      transform: scaleY(2) scaleX(1.05) rotate(90deg);
    }
<div class="icons">
  <a href="#"></a>
</div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...