标签: css-shapes

我想在div的左侧和右侧有一个箭头.就像在这里,但在两边:http://cssarrowplease.com/

那可能吗？

我需要一个世界地图上的指针,如下图所示:

我能够使用HTML/CSS创建一个圆圈,这是我创建的圆圈:

.circle {
border-radius: 50%/50%; 
width: 50px;
height: 50px;
background: black;

}

http://jsfiddle.net/sreeram62/8QRAJ/

现在我需要与图像相交的2条线,如上图所示.是否可以使用html/css？

谢谢

请看一下图片

我的挑战如下.蓝色是带背景图像的div.角度应为-6度.在这个div中我们有透明的png(这里是2个人).允许人民头部^^°离开div.但不是腿.并且应该对图像进行动画处理,以便它们可以从左向右"行走".

问题是对我来说,我不知道如何将头部归档,可以"离开"盒子,但腿需要隐藏"溢出".

蓝色框的宽度应为100%,因此将-6deg旋转到div并且+ 6deg对人不起作用.

谢谢你的帮助.如果不清楚我的问题是什么,那就问问吧.Englisch不是第一语言^^谢谢.

编辑:没有"封面"div.我需要看到一个渐变.蓝色上方和下方的白色区域必须是透明的.

EDit2: I think i got it ^^ Look at this Thanks to SD. !

https://jsfiddle.net/rsr04udj/

嗨,我正在尝试在div中制作一个角落的丝带,它到处都是我希望它看起来整洁而且很好看它越过div并且不能很好地坐好

/* The ribbons */

.corner-ribbon {
  width: 100px;
  background: #e43;
  position: absolute;
  top: 25px;
  left: -50px;
  text-align: center;
  line-height: 50px;
  letter-spacing: 1px;
  color: #f0f0f0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  overflow: hidden;
}
.corner-ribbon.shadow {
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}
/* Different positions */

.corner-ribbon.top-right {
  /* top: 18px; */
  right: -4px;
  left: auto;
  transform: rotate(45deg);
  -webkit-transform: rotate(46deg);
  overflow: hidden;
}
.corner-ribbon.blue {
  background: #39d;
}

<div class="large-4 columns">

  <div class="corner-ribbon top-right sticky blue">Hello</div>
</div>

有人能告诉我如何在右上方放置一个角落色带,看起来聪明又漂亮,可以处理大约3个单词.

是否有可能使div与此形状相同,如果是,请分享代码

我喜欢使用CSS 构建此图标(使用Fontawesome).什么是CSS的最佳实践？谢谢!

我使用带有transform:skew();的css属性的div实现了这样的东西.

但是我希望它有一条曲线,线条在上升,所以如果你能给我一个正确的方向,或者告诉我更多关于将响应式svg图形艺术插入特定背景的最简单方法对于元素或页面本身,我们非常感激

编辑:这里的CSS使用

.skewed-bg{
    background: #830024;
    -webkit-transform: skew(0deg, -9deg);
    transform: skew(0deg, -9deg);
    margin-top: -200px;
}
.skewed-bg .container{
    -webkit-transform: skew(0deg, 9deg);
    transform: skew(0deg, 9deg);
    padding-top: 200px;
    color: white;
}

我试图用CSS绘制它,我没有解决方案.谁能帮我这个？Ps:我搜索的东西很少,谢谢.

所以我对CSS很感兴趣.但现在我想修改它并添加内部动态图像.这是我有的:

.heart {
  position: relative;
  width: 100px;
  height: 90px;
  float: left;


width: 100px;
  height: 90px;
  overflow: hidden;
}

.heart.right {
    left: auto;
    right: 0;
}

.heart:before,
.heart:after {
  position: absolute;
  content: '';
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: #fc2e5a;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

这是我的小提琴:https://jsfiddle.net/9g1qswdd/

我想制作一个带阴影背景颜色的图形,如下所示:

有人可以帮我这个吗？