css-shapes

I'm trying to split a ring up into 3 segments, each segment would have text on it centered. I can figure out the text part, but out of the ways I've tried to do the ring, I can't seem to get it to split into 3 equal parts. Ideally, I'd like to do this with borders so I can add arrows to them, I tried to do this by splitting a circle but ran into problems with getting the text to sit where I need it. I'd like to keep this primarily to CSS, but I know the arrows on the segments will probably throw a roadblock. This is what I am trying to do https://jsfiddle.net/wrqpas09/ .segment { position:

I have been trying to do the white shape with a div: http://sircat.net/joomla/sircat/mies/2.png how do I get the diagonal shapes of the bottom of the div? I have this for the div: width: 620px; height: 440px; background-color: white; thank you Edit: just forget the bg behind the div, I want to make the div with the diagonal borders, not with the help of the bg because it is in the top layer You can also use borders and the :after pseudo selector: http://jsfiddle.net/qQySU/ #pointed { position: relative; margin: 0 auto; width: 200px; height: 200px; background-color: white; } #pointed:after,

I am trying to replicate as pixel perfect as I can get and im having trouble trying to do the shadow on the right. Is this possible with css? CSS: *{margin:0px;padding:0px;} html { width:100%; height:100%; text-align: center; } .bold { font-weight:700; } #ribbon { padding: .34em 1em; margin: 0; margin-top: 5%; position:relative; color: #000; text-align: center; letter-spacing:0.1em; padding-top:12px; padding-bottom:12px; display: inline-block; background: #ffd82b; z-index:100; box-shadow: 0 7px 0px -2px #ebeced; } #ribbon:after { content: ""; width:3.2em; bottom:-.5em; position:absolute;

I am looking for a way to create an incomplete square with borders with some text and a background with pure css. Here is what I am trying to achieve: My initial idea is to create the shape based on three shapes and then colorize the borders accordingly: But I am a bit concerned about the adaptive version - scaling three shapes. So maybe a better idea, anyone? This approach allows you to: add any content and the borders will adapt around it regardless of height or width of the content support transparent background and can be displayed over an image or non plain colors doesn't add any

I am trying to create error label for div with arrow, but have problem with centering. I get: I need something like: HTML: <div class="error-label-arrow"></div> <div class="error-label">This field is required.</div> CSS: div.error-label{ padding: 7px 10px 0 4px; color: #fff; background-color: #DA362A; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } div.error-label-arrow{ border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid #DA362A; float: left; } Is it possible? Here is the fiddle Curt You can use CSS Pseudo classes to do