标签: css-shapes

这是我想要的形状.可以用CSS完成吗？我创造了一个圆圈.这里 :

<div class="lemon"></div>

CSS: -

.lemon {
   width: 200px; 
   height: 200px;
   background-color: #FFFA40;
   border: 4px solid #FFF150;  
   border-radius: 100px;
   top:20px;
}

我要做的是在CSS的底部边框上用CSS创建一个三角形,并在其中写一些文字,如下图所示:

到目前为止我所做的是:

1. 创建块元素,其橙色大底边框.
2. 使用CSS创建三角形.

我现在需要的只是将三角形正好放在那个确切位置的中间.我尝试了几种方法来做到这一点,但没有任何结果.

这是我的代码:

.content_block {
  position: relative;
  border: ridge;
  border-width: 1px;
  border-color: #969696;
  background: #FFF;
}
.content_block.orange {
  border-bottom: 40px solid #F59A3C;
}
.content_block > .image {
  position: absolute;
  display: block;
  height: 110px;
  width: auto;
  top: 20%;
  left: 15%;
}
.content_block > .text {
  position: absolute;
  color: #FFF;
  font-weight: bold;
  font-size: 12pt;
  top: 105%;
  left: 33%;
}
.content_block.size_3 {
  height: 207px;
  width: 240px;
}
.content_block.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 …

我试图在左边做一个边界,连接右边的水平线.我将展示它应该是什么样子的草图,我需要有关如何使它变得简单的想法:

感谢许多好的解决方案,下面的解决方案运行良好.

有没有一种简单的方法可以在左边的渐变上创建边框,还有水平线？还有如何填补这些空白？我想制作一个时间表..

我在哪里可以找到一个用css3和jQuery创建这样一个圆圈的例子(用于导航)中心
应该有文本(html)
当你点击(或悬停)下一个项目时,中心内容应该改变,同时也是背景颜色

我的网站上有以下设计.如何才能实现这种反转圆角效果？

我相信有几种方法.我正在寻找最简单,最优雅的方式来做到这一点.

如果你能在答案中分享一个人,我会很高兴.

我正在使用Ionic框架在App项目中工作.我正在尝试制作电视遥控器的导航按钮.我的目标是使用CSS制作下面链接(来自kodi ios远程应用程序)中的图像按钮.有人能帮我吗？

我正在尝试使用CSS创建一个圆圈,它看起来与下图完全相同:

如何用CSS制作这个？

有没有办法用CSS制作与图像相同的样式？

这是我正在尝试创建的图像：

我曾尝试使用边界半径，但结果总是太圆。我正在寻找一个 CSS 解决方案（没有 SVG）。

.blade {
  height: 300px;
  width: 150px;
  border-radius: 0 0 50% 50%;
  border-left:20px solid #c0bfde;
  border-right:20px solid #7b7ba0;
  background:#e3e1f6
}

<div class="blade"></div>

我想使用CSS创建上面的图像,将其用作按钮(在其上方放置文本).

按钮大小:宽度为180px,高度为36px

谁能帮我？

如何使用CSS和图像创建一个带有切口的圆圈？我想要的一个例子如下所示.需要一个crossbrowser解决方案,并且css不是html.

是否有可能以这种方式重叠2张图片？

想象一下,你有两张图像,就像60%的图像一样.它们应该重叠,但是通过对角线切口.

如何使用CSS实现这种形状:

理想情况下,我也喜欢背景阴影效果.