标签: css-shapes

我只知道圆边的方式.无法弄清楚如何创建这种无图像ul li标签.如你所见,它不完全是三角形:它的顶部和底部有点圆润.是否可以使用css3创建与下图最相似的内容？如果有,怎么样？

先感谢您!

我一直在努力解决这个问题已有一段时间了.显然使用%宽度和高度是不够的？

现在我已经修复了100px的宽度和高度,边框半径是它的一半所以它会使它看起来圆.行高设置为100px,因此文本将垂直显示在这些圆圈的中间.我不知道如何以另一种方式垂直居中文字......

如何使此菜单响应,以便随着屏幕尺寸的变化而变小？

HTML:

<div id="menu">
 <ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul> 
</div>

CSS:

#menu ul {list-style-type: none; padding: 0; margin: 0;}
#menu li {display: inline; float: left;}
#menu a {
    display: block;
    width: 100px;
    height: 100px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    border: 1px #a2a2a2 solid;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1em;
    text-align: center;
    line-height: 100px;
    margin: 5%;
}

例如.我需要能够使用CSS创建一个关键形状

jsbin为方便起见

我想知道是否有人可以告诉我是否有可能创建一个CSS相互连接的半圈并水平重复它们看起来像一个花环.它们应该是两种不同的颜色.非常感谢你!

我想知道是否可以在CSS3中执行这样的复杂按钮？我不知道从哪里开始.我可以很容易地做类似梯形的形状,但是添加边框似乎是不可能的.我错过了什么吗？

(PS:图片是Deus Ex Human Revolution的形式)

我正在尝试创建一个这样的css功能区:

它可以使用以下代码正常工作.

body {
  background: url('http://i.imgur.com/FgqcKXm.jpg') no-repeat;
}
h1 {
  background: #A52927;
  display: inline-block;
  padding: 0px 30px;
  color: #EEE4D3;
  position: relative;
  height: 40px;
  line-height: 40px;
}
h1:after {
  position: absolute;
  content: "";
  top: 0px;
  left: auto;
  right: 0px;
  height: 0px;
  width: 0px;
  border-top: 20px solid transparent;
  border-right: 20px solid white;
  border-bottom: 20px solid transparent;
}

<h1>test</h1>

问题: 它在非白色背景上显示白色边框:

有没有其他方法可以在非白色背景上使用css获得相同的形状？

JS小提琴

我想画心:

使用HTML表的nth-child属性,但无法弄清楚如何做到:Codepen

table tr td:nth-child(n+3):nth-child(-n+7) {
    background-color: red;
}

我想在我的导航栏菜单中间创建一个半圆形的水平矩形.除此之外,所有这些形状必须具有背景图像.

像这样的东西:

实现这一目标的最佳方法是什么？

寻找用CSS制作这个特殊形状的代码..

任何帮助非常感谢!

我很难解决这个问题:

我想用css做这个:

像图片一样:两个带有圆角的梯形(重要!),一个带有文字的梯形,另一个带有图片或图标,带有图标的梯形的大小可以更薄,但两个梯形必须是相同的大小.

我不知道是否应该使用svg作为背景或纯css.如果我使用svg,我如何在圆角内的空格中插入文本和图标？

预先感谢您的帮助.