css-shapes | 易学教程

Clip path inset circle?

阅读更多关于 Clip path inset circle?

问题 Is it possible to create an inset circle clip path so that the clip path would effectively cut a hole through the div in the center opposed to only showing the center? The div should all be shown apart from a hole cut out in the center to create something like this: I would like to use clip path or something similar so that I can have stuff (images and content) behind the div and the clip path will be used to reveal this. So the div (blue div from my jsfiddle) will disappear from the center

transparent shape with arrow in upper corner

阅读更多关于 transparent shape with arrow in upper corner

问题 Please see the image below. I want to add an arrow to the top right of a div which I am treating as editable input box. Please help me how I can achieve this using CSS. I cannot use a SVG since I need this as a div to show emoticons as images over it. <div placeholder="Your message" id="Message"> ... </div> 回答1: You can do it like in the below snippet. The method used to achieve the shape is as given below: The main div element only has a top, bottom and left border. The right border is

Title with lines filling remaining space on both sides

阅读更多关于 Title with lines filling remaining space on both sides

问题 I've been asked to create this title, purely with css, Is it even possible? The background of the text needs to remain transparent, the h2 needs to span the width of any container and have the left and right borders fill automatically the remaining space. h2 { font-size:42px; line-height:48px; width:100%; overflow: hidden; &:before { content:''; position:relative; padding-left:50px; padding-right:10px; margin-right:10px; margin-bottom:10px; background:red; height:3px; display:inline-block; }

CSS 3 Shape: “Inverse Circle” or “Cut Out Circle”

阅读更多关于 CSS 3 Shape: “Inverse Circle” or “Cut Out Circle”

I want to create a shape, which i would describe as "inverse circle": The image is somehow inaccurate, because the black line should continue along the outer border of the div element. Here is a demo of what i have at the moment: http://jsfiddle.net/n9fTF/ Is that even possible with CSS without images? Update: CSS3 Radial Background Gradient Option (For those browsers supporting it--tested in FF and Chrome--IE10, Safari should work too). One "problem" with my original answer is those situations where one does not have a solid background that they are working against. This update creates the

Is it possible to style a div to be trapezoidal?

阅读更多关于 Is it possible to style a div to be trapezoidal?

问题 I know it's possible to skew but I don't see a way to skew each corner with a particular degree. Here's the project I'm working on: http://map.ucf.edu/ Looking specifically at the tabs within the menu. Right now I'm using images, I would like to change that for capable browsers. I know it's possible to create a CSS trapazoid, but that is using borders without content. The end result also needs a bit of rounded corners. edit: Starting with Zoltan Toth's solution I was able to achieve this:

Draw Circle using css alone [duplicate]

阅读更多关于 Draw Circle using css alone [duplicate]

This question already has an answer here: How to draw circle in html page? 16 answers Is it possible to draw circle using css only which can work on most of the browsers (IE,Mozilla,Safari) ? Tom You could use a .before with a content with a unicode symbol for a circle (25CF). .circle:before { content: ' \25CF'; font-size: 200px; } <span class="circle"></span> I suggest this as border-radius won't work in IE8 and below (I recognize the fact that the suggestion is a bit mental). Tatu Ulmanen Yep, draw a box and give it a border radius that is half the width of the box: #circle { background:

Cutting image diagonally with CSS

阅读更多关于 Cutting image diagonally with CSS

问题 How to cut away part of an image or container diagonally using CSS? The part that needs to be cut away has the form of a triangle To be more specific: if the above picture is the image the blue part should be cut out, not the yellow The html should be: <figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock"> </figure> or: <div class="container"> content </div> There is from my own investigation a lot of ways to do this, but most of them is hacky, so looking for a best approach Min browser

CSS Speech Bubble with Box Shadow

阅读更多关于 CSS Speech Bubble with Box Shadow

Creating a DIV that uses CSS to draw a triangle to the left. Trying to apply a uniform box-shadow to both parent and the pseudo element (see images) and code. Is this possible? Or am I better off using border-image for this? (Top: Before Shadow, Middle: CSS Box-Shadow, Bottom: Desired Result) .bubble{ height: 200px; width: 275px; opacity: 0; margin-top: 41px; float: right; background-color: #F2F2F2; -webkit-border-radius: 5px; -webkit-box-shadow: 0px 0px 6px #B2B2B2; } .bubble::after { height: 0px; width: 0px; content: "\00a0"; display: block; margin-left: -10px; margin-top: 28px; border-width

Pixelated edge around a CSS Circle with overflow: hidden;

阅读更多关于 Pixelated edge around a CSS Circle with overflow: hidden;

Here is the JSFIDDLE of my cat/animation without any drop-shadows to show the problem as clearly as I can. To my understanding this is being caused by the border-radius and possibly due to overflow: hidden; . The owl is not what this question is about , just an example of a similar situation I was in. The jsfiddle/cat is what this question is about, sorry for the mix up! Here is a JSFIDDLE for my cat with an inset box shadow using the blur property of a box-shadow and the pixelated edge is still the same around the eye. The answer on here does solve what I saw with my Owl image but not for

CSS Transform Skew [duplicate]

阅读更多关于 CSS Transform Skew [duplicate]

This question already has an answer here: Responsive CSS Trapezoid Shape 2 answers Does anyone know how to achieve skew like this: Using CSS's new transform property? As you can see I'm trying to skew both corners, anyone know if this is possible? CSS: #box { width: 200px; height: 200px; background: black; position: relative; -webkit-transition: all 300ms ease-in; } #box:hover { -webkit-transform: rotate(-180deg) scale(0.8); } #box:after, #box:before { display: block; content: "\0020"; color: transparent; width: 211px; height: 45px; background: white; position: absolute; left: 1px; bottom: