标签: css-shapes

我正在寻找"切割"div的左上角,就像你已经折叠了一页的一角.

我想用纯CSS做,有什么方法吗？

是否可以仅使用CSS 切出空心圆？

我们都可以这样做:

但我们可以这样做吗？

的圆必须是中空的,并且透明.因此,通过在a上放置一个纯色圆圈就无法解决问题div.

我正在寻找一种在CSS3中使用跨浏览器类似iPhone的徽章的方法.我显然想为此使用一个div,但替代解决方案会很好.重要的因素是它需要在所有浏览器中水平和垂直居中.

关于这些通知的一个有趣的设计问题是它们不能具有指定的宽度(高度是固定的) - 它们应该能够处理[在ascii绘图中](1)和(1000),其中(1000)不是一个完美的圆形圆,但看起来更像是一个胶囊.

编辑:附加约束(来自史蒂文):

• 没有JavaScript
• 没有将display属性重命名为table-cell,这是一个有问题的支持状态

创建一个使用CSS在左侧绘制三角形的DIV.尝试将统一的box-shadow应用于父元素和伪元素(请参阅图像)和代码.

这可能吗？或者我最好使用border-image吗？

(上:暗影之前,中间: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: 10px 10px 10px 0;
        border-style: solid;
        border-color: transparent #F2F2F2 transparent transparent;

        -webkit-box-shadow: 0px 0px 6px #B2B2B2;
    }

我试图在我的英雄的底部有一个三角形/箭头,但它没有响应,并且在移动设备上不能很好地工作,因为三角形漂浮到右边并且不再是绝对居中.

我怎么能一直将三角形放在div底部的绝对中心？

这里的示例代码:

http://jsfiddle.net/SxKr5/1/

HTML:

<div class="hero"></div>

CSS:

.hero {     
    position:relative;
    background-color:#e15915;
    height:320px !important;
    width:100% !important;


}


.hero:after,
.hero:after {
    z-index: -1;
    position: absolute;
    top: 98.1%;
    left: 70%;
    margin-left: -25%;
    content: '';
    width: 0;
    height: 0;
    border-top: solid 50px #e15915;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}

是否可以使用没有设定宽度或高度的边界半径制作胶囊形状？

我希望左右两侧完全圆润,而胶囊沿着它的水平长度保持笔直.将半径设置为50%似乎不会产生预期的效果.

如何使用CSS 绘制刻度符号？我使用Unicode找到的符号在美学上并不令人愉悦.

编辑 图标字体是一个很好的建议.我一直在寻找像这样.

我正在研究一种使用'cogs and chains'的css动画,但我无法创建一个'平滑'的边框旋转序列.

你可以在这个小提琴中看到如何(当前)我正在使用伪元素来生成'旋转'效果.这是通过在白色虚线和黄色虚线边框之间"切换"来完成的,使其看起来像是"边界在旋转".

是)我有的

#one{
  -webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4+ */
  -moz-animation:    rotateClockwiseAnimation 5s linear infinite; /* Fx 5+ */
  -o-animation:      rotateClockwiseAnimation 5s linear infinite; /* Opera 12+ */
  animation:         rotateClockwiseAnimation 5s linear infinite; /* IE 10+, Fx 29+ */

}
#two{
  -webkit-animation: rotateAntiClockwiseAnimation 5s linear infinite; /* Safari 4+ */
  -moz-animation:    rotateAntiClockwiseAnimation 5s linear infinite; /* Fx 5+ */
  -o-animation:      rotateAntiClockwiseAnimation 5s linear infinite; /* Opera 12+ */
  animation:         rotateAntiClockwiseAnimation 5s linear infinite; …

我想在图像上做一个透明的箭头.此三角形应缩进半透明块并显示背景图像.

期望的输出:

.barShow {
  background-color: #000;
  opacity: 0.5;
}

.barShow:before {
  top: 0%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-top-color: #999;
  border-width: 20px;
  margin-left: -20px;
}

<div class="barShow"></div>

该透明CSS箭应该是没有颜色的透明.

我有一个看起来像橙色方块的div

我想以某种方式在这个div中绘制一个白色的X,这样它看起来更像

无论如何要在CSS中执行此操作还是更容易在Photoshop中绘制并使用图像作为div背景？div代码看起来像

div {
    height: 100px;
    width: 100px;
    background-color: #FA6900;
    border-radius: 5px;
}