Question

我正在尝试使用CSS创建一个Facebook图标。使用来自互联网的一些形状制作教程我能够设计如下的facebook图标：

创建的形状不对。我想获得一个更加优雅的结果，如：

我尝试修改CSS但我无法正确执行。使用的HTML如下：

＆＃13;

#fb-icon {
  background: blue;
  text-indent: -999em;
  width: 120px;
  height: 110px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  border: 15px solid blue;
  border-bottom: 0;
}
#fb-icon::before {
  content: "/20";
  position: absolute;
  background: blue;
  width: 40px;
  height: 90px;
  bottom: -30px;
  right: -37px;
  border: 20px solid #eee;
  border-radius: 40px;
}
#fb-icon::after {
  content: "/20";
  position: absolute;
  width: 55px;
  top: 50px;
  height: 20px;
  background: #eee;
  right: 5px;
}

＆＃13;

<div id="fb-icon">

</div>

＆＃13;

我想知道Shape的CSS代码中的问题在哪里。请指导我。

Answer 1

DEMO

<p class="logo">Facebook</p>


.logo {
    background: #4661b0; /* make it "Facebook blue" */
    text-indent: -999em; /* Back the actual text in the paragraph tag out of the element */
    width: 100px; /* Make it nice and big */
    height: 110px; /* The tag is 10px larger because of how we're handling the borders below */
    border-radius: 3px; /* for that oh so important modern look */
    position: relative; /* so we can position our other elements absolutely */
    overflow: hidden; /* so we can hide any overflow those elements will have */
    border: 15px solid #4661b0; /* so we can make it look like the F is not butting up against the right side of the box */
    border-bottom: 0; /* removing the border here though, because the F does touch the bottom of the box */
}

.logo:before {
    content: "/20"; /* Psuedo elements need something for content, this means a blank space */
    position: absolute; /* So we can position it exactly where we want it */
    background: #4661b0; /* make the box the same Facebook blue */
    width: 40px; /* setup the right width, which actually extends the box outside of the containing element (along with our positioning below) */
    height: 90px; /* this also extends the trunk outside of the main box */
    bottom: -30px; /* as mentioned above, we pull the box we're using to create the trunk of the F down to hide some of it, because it will have rounded corners on all sides */
    right: -37px; /* similar to what we're doing with bottom above */
    border: 20px solid white; /* make the remaining visible border white and thick enough to look right */
    border-radius: 25px; /* now give the top right visible corner the necessary curve */
}

.logo:after {
    content: "/20"; /* again, pseudo elements need content to be visible */
    position: absolute;  /* and we're going to want to position absolutely */
    width: 55px;  /* the desired width of the box to make the bar long enough */
    top: 50px;  /* set it in the proper location */
    height: 20px;  /* make it thick enough */
    background: white;  /* and the right color */
    right: 5px;  /* then back it up from the edge of the containing block a bit */
}

Source

Answer 2

试试这个..

将border-radius 40px;更改为border-radius: 25px;到元素之前，并将此css border-bottom-left-radius: 0; ..添加到同一元素

Answer 3

查看此..只需更改:after和:before中的某个值即可。并且框中的width

#fb-icon {
  background: blue;
 text-indent: -999em;
  width: 100px;
  height: 110px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  border: 12px solid blue;
  border-bottom: 0;
}
#fb-icon::before {
content: "/20";
  position: absolute;
  background: blue;
  width:29px;
  height: 90px;
  bottom: -30px;
  right: -25px;
  border: 20px solid #eee;
  border-radius: 28px;
}
#fb-icon::after {
 content: "/20";
  position: absolute;
  width: 56px;
  top: 50px;
  height: 20px;
  background: #eee;
  right: 5px;
}

<div id="fb-icon">

</div>

Answer 4

您的CSS需要进行一些更改，只需为width更改#fb-icon，为border-radius更改#fb-icon::before，为right更改#fb-icon::after，然后检查改变了css

#fb-icon {
  background: blue;
 text-indent: -999em;
  width: 100px;
  height: 110px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  border: 15px solid blue;
  border-bottom: 0;
}
#fb-icon::before {
content: "/20";
  position: absolute;
  background: blue;
  width:40px;
  height: 90px;
  bottom: -30px;
  right: -37px;
  border: 20px solid #eee;
  border-radius: 30px;
}
#fb-icon::after {
 content: "/20";
  position: absolute;
  width: 55px;
  top: 50px;
  height: 20px;
  background: #eee;
  right: 2px;
}

查看此链接http://jsbin.com/weyebeg/edit?html,css,output

在CSS中创建facebook图标

4 个答案: