CODEWITHSUNDEEP
csscss-shapes
Josh Powell
Josh Powell

Reputation: 6297

Can I make this shape as one solid object with css only?

I have the desired shape but I am unable to get the box-shadow due to the use of css triangles.

(I don't want to use filter: drop-shadow unless that is the only option)

Here is what I currently have:

.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;
}

fiddle: JSFIDDLE

Is there any shape or workaround that I can make this as one solid object not a before and after?

(I'm talking about the little bullet point on the left side)

Upvotes: 3

Views: 521

Answers (3)

brbcoding
brbcoding

Reputation: 13596

You could give it a little skewY()... Seems to look pretty good.

.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

Upvotes: 1

Josh Powell
Josh Powell

Reputation: 6297

Wow I was able to get pretty darn close using border-radius on a square.

(This is like 95% of the shape but to make it elongate over being perfectly square may be impossible.)

(Holy cahoots! It works great with a border, outline, box-shadow, and more! WOW)

Here is the 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);
}

Fiddle: JSFIDDLE

Anyone have any other ideas?

Upvotes: 3

gaurav5430
gaurav5430

Reputation: 13892

you might take some inspiration from this site

it has some awesome tricks for making a heart and a curved arrow as well

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

for e.g this makes a badge ribbon 

#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);
}

also this speech bubble might help

#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;
}

Upvotes: 1

Related Questions