Question

我有所需的形状，但由于使用了css三角形，我无法获得box-shadow。

（我不想使用filter: drop-shadow，除非这是唯一的选择）

以下是我目前的情况：

.serTabs li:before {
  width: 10px;
  height: 10px;
  background: #5b5b5b;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  left: 5px;
}

.serTabs li:after {
  border-left: 10px solid #5b5b5b;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  left: 10px;
}

小提琴：JSFIDDLE

我是否有任何形状或解决方法可以将其作为一个固体对象而不是之前和之后？

（我说的是左侧的小小点）

Answer 1

哇，我可以在广场上使用border-radius非常接近。

（这就像95％的形状，但要使它在完全正方形上伸长可能是不可能的。）

（神圣的cahoots！它适用于边框，轮廓，盒子阴影等等！WOW）

这是css：

div {
    width: 100px;
    height: 100px;
    background: brown;
    border-radius: 100% 100% 0 100%;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

小提琴：JSFIDDLE

任何人都有其他想法吗？

Answer 2

你可能会从这个网站获得一些灵感

它有一些很棒的技巧，可以制作一个心脏和一个弯曲的箭头

http://css-tricks.com/examples/ShapesOfCSS/

例如，这会制作徽章色带

#badge-ribbon {
 position: relative;
 background: red;
 height: 100px;
 width: 100px;
 -moz-border-radius:    50px;
 -webkit-border-radius: 50px;
 border-radius:         50px;
}

#badge-ribbon:before,
#badge-ribbon:after {
  content: '';
  position: absolute;
  border-bottom: 70px solid red;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  top: 70px;
  left: -10px;
  -webkit-transform: rotate(-140deg);
  -moz-transform:    rotate(-140deg);
  -ms-transform:     rotate(-140deg);
  -o-transform:      rotate(-140deg);
}

#badge-ribbon:after {
  left: auto;
  right: -10px;
  -webkit-transform: rotate(140deg);
  -moz-transform:    rotate(140deg);
  -ms-transform:     rotate(140deg);
  -o-transform:      rotate(140deg);
}

这个讲话泡泡可能会有所帮助

#speech-bubble {
   width: 120px; 
   height: 80px; 
   background: purple;
   position: absolute;
   -moz-border-radius: 10px; 
   -webkit-border-radius: 10px; 
   border-radius: 10px;
}
#speech-bubble:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid purple;
   border-bottom: 13px solid transparent;
   margin: 13px 0 0 -25px;
}

Answer 3

你可以给它一点skewY() ......似乎看起来很不错。

.bullet {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;

    width: 100px;
    height: 100px;
    background: black;
    border-radius: 0px 50% 50% 50%;
    -webkit-transform: rotate(135deg) skewY(15deg);
    box-shadow: 0 0 10px 0 black;
}

<强> DEMO

我可以将此形状设为仅使用css的固体对象吗？

3 个答案: