小编Ste*_*ide的帖子

我想用css创建如下图所示的曲线.

我正在尝试这样的事情:

.curve {
  background-color: #8aa7ca;
  height: 65px;
  width: 160px;
  -moz-border-radius-bottomright: 25px 50px;
  border-bottom-right-radius: 25px 50px;
}

<div class="curve">
  <p>This is a sample text.</p>
</div>

请帮我

我正在创建一个Aurelia项目,并为我的视图使用自定义元素.我读到使用自定义元素是更好的做法,因为它们的范围很广,但我怀疑如何正确地设置它们.

例如,要获得背景颜色来填充自定义元素,我需要制作它display:block.这需要为很多元素完成.

div {
  background-color:green;
}

div:first-child customelement {
  display:block;
}

customelement {
  background-color:blue;
}

<div>
  <customelement>
    <h1>test</h1>
  </customelement>
</div>

<div>
  <customelement>
    <h1>test</h1>
  </customelement>
</div>

是否有一种简单的方法可以为所有自定义元素制作此通用名称？也许任何SCSS方法都可以定位每个不存在的HTML5元素？

这就是我用中风而没有填充的方式

fill: none !important;
stroke-width: 1px;

• 我想要双击.

小提琴

HTML

<div id="DiamondCenter">
    <div id="triangle-topleft"></div>
</div>

CSS

#DiamondCenter {
    position:fixed;
    top:2%;
    left:48%;
    background: #24201a;
    height:40px;
    width:40px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index:20 !important;
}
#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 40px solid gray;
    border-right: 40px solid transparent;
}

我正在寻找使用CSS,SVG或Canvas创建无限符号.

如果您不知道无穷大符号是什么,这是一个例子:

我试图创建形状,但只设法创建形状的一面.我最终希望将其保留为一个元素并尽可能简单.

.infinity {
  width: 100px;
  height: 100px;
  border-radius: 50% 50% 0 50%;
  border: 5px solid black;
  transform: rotate(-45deg);
}

<div class="infinity"></div>

我发现了这个问题:

• 带有HTML的无穷大符号

但我正在考虑将其用作某种形状的图标或图像,因此希望它具有更多的形状自由度.

我在www.example.com上有一个网站.在该域名上,Wordpress网站位于目录wp中.

因此,要访问我的wordpress网站,您应该访问www.example.com/wp,这是主要网站.

在root中我有index.html你选择语言,然后去Wordpress网站

我需要的听起来很简单!:)我想使用.htaccess或其他任何可以做的技巧从网址中删除wp,所以当浏览Wordpress网站时它没有wp的工作!

我必须注意网站必须留在wp文件夹中!

这可以实现吗？

我正在尝试使用带圆头的CSS(顶部边缘,而不是三角形)创建一个V形状,但是无法实现这一点.有人可以帮忙吗？在这里演示.

CSS:

#shape{
    width: 100px;
    height: 100px;
    background-color: lightblue;
    -webkit-clip-path: polygon(100% 100%, 0 100%, 0 0, 52% 16%, 100% 0);
    clip-path: polygon(100% 100%, 0 100%, 0 0, 52% 16%, 100% 0);
}

我创建了一个形状,表示一个阴影朝向底部变大的页面.

body {
  background: #dddddd;
}
div {
  background: white;
  margin: 40px auto;
  height: 300px;
  width: 300px;
  position: relative;
  padding: 10px;
}
div:before,
div:after {
  height: 96%;
  z-index: -10;
  position: absolute;
  content: "";
  left: 8px;
  top: 2%;
  width: 30%;
  max-width: 300px;
  background: transparent;
  box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
  transform: rotate(1.5deg);
}
div:after {
  transform: rotate(-1.5deg);
  right: 8px;
  left: auto;
  box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}

<div></div>

我需要将其旋转,但是当我尝试添加时transform: rotate(10deg),box-shadow幻觉会被破坏并且会在父图层上移动.

body { …

我使用SVG元素创建了一个相当简单的形状，然后使用将该元素放入CSS中clip-path。它应该使拐角对我来说是圆的，但是由于某些原因，只有一个拐角可以完美地实现效果。

这是形状：

<svg height="500" width="500">

  <path fill="#555555" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />

</svg>

这是当我将其用作 clip-path

body {
  background: #555;
}
img {
  clip-path: url(#svgPath);
  -webkit-clip-path: url(#svgPath);
}

<svg height="0" width="0">
  <defs>
    <clipPath id="svgPath">
      <path fill="#FFFFFF" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
    </clipPath>
  </defs>
</svg>

<img src="http://lorempixel.com/500/500/" />

在FireFox中，它似乎可以完美工作，但显示在Chrome中，除右下角外，角落未正确切割。

我有一个动态的元素列表。我不希望这个列表太长。我可以使用：

ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

但这总是导致两列。如果列表中只有几个元素，我宁愿只有一列。所以有 5 个或更少的元素，我想要这个：

1
2
3
4
5

1 4
2 5
3 6