标签: css-shapes

我知道我可以使用径向渐变创建插入/倒置边框，就像这里：Inset border-radius with CSS3，但我想知道的是我是否可以在结果形状周围绘制 1px 的实心边框，就像这样图片：

我不仅希望左下角半径也被边框反转，并且剩余空间内的背景颜色必须是透明的。是否可以使用 CSS3 和 HTML（我现在对画布或 SVG 不感兴趣）？

我在Photoshop中有一些简单的图形(只是一个样式线).但我对如何使用CSS和HTML重新创建它感到困惑.图形是:

和

我想将它们用作顶部边框,底部边框和分隔线.

我试图在标签之前放置一个响应式css广场.像这样的东西

我一直试图这样做,但我似乎无法让广场出现.你能帮我解决这个问题.

h1::before {
position: relative;
width: 25%;
padding-bottom: 25%;
overflow: hidden;
background: red;
}

谢谢您的回答!

我相信这对于熟悉CSS语言的人来说是一个非常基本的问题(不是我的情况大声笑).我正在使用jsfiddle上托管的代码在我的网站上制作一些语音气球.当气球内的消息很少时,问题出现了.例如,在上面发布的代码中,将代码从"bubble you"气球更改为:

<div class="bubble you">Hi.</div>

你会看到气球与前一个气球保持在同一水平线上,这很丑陋而且很奇怪.我希望气球一个接一个地保持下来(一个在另一个之下),即使消息像一个简单的'嗨'一样小......我应该在气球类中更改或添加哪些属性才能获得此功能？

创建与其父容器重叠的 div 的最佳方法是什么。我正在使用引导程序并想要创建一个比其容器更大的横幅，我想创建以下内容：

这是我到目前为止的代码：

<div class="container container-white no-pd">

        <div class="service-banner">
            <div class="text-center">
                Headline title here <a href="#" title="title" class="btn btn-default">Our Services</a>
            </div>
        </div><!--/service banner-->

    </div><!--/container-->

这给了我以下内容：

有什么建议吗？

我尝试了以下场景,我需要动画我的背景图像,如在我的div悬停时从下到上填充.而我的动画不像从底部填充而是从底部到顶部滑动.任何人都可以建议我如何才能达到我的结果.我也可以使用jQuery动画和css3关键帧动画.

下面是我的小提琴代码

.bg {
  background: url("https://9887c7297bf844d024e4cccb28a722f62dbe3d73.googledrive.com/host/0B6jEeghp1bpxfkszMFVRcDZBdGF4d012d0hjaS0xWTRvRkh6SDNEUFhUb2pETzlSYWZtbzA/work_home.png") no-repeat center;
  height: 250px;
  position: relative;
}
span {
  background: url(https://9887c7297bf844d024e4cccb28a722f62dbe3d73.googledrive.com/host/0B6jEeghp1bpxfkszMFVRcDZBdGF4d012d0hjaS0xWTRvRkh6SDNEUFhUb2pETzlSYWZtbzA/work_home_animate.png) no-repeat top 32px center;
  bottom: 0px;
  height: 0;
  transition: height 0.5s;
  position: absolute;
  right: 0;
  left: 0;
}
.bg:hover span {
  height: 184px;
}

<div class="bg"><span></span>
</div>

小提琴链接

我想在CSS3中制作一个带有边框,圆角和透明背景的六边形,如下图所示:

我不能用圆角和边框做这个.

我的代码在这里:

#hexagon-circle {
  position: relative;
  margin: 1em auto;
  width: 10em;
  height: 17.32em;
  border-radius: 1em/.5em;
  background: red;
  transition: opacity .5s;
  cursor: pointer;
}
#hexagon-circle:before {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
  -webkit-transform: rotate(60deg);  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: rotate(60deg);  /* IE 9 */
  transform: rotate(60deg); /* Firefox 16+, IE 10+, Opera */
}

#hexagon-circle:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
  -webkit-transform: rotate(-60deg);  /* …

我正在尝试创建类似于此的布局:

我知道我可以使用svg或clip-path创建"A",但问题是我想保持"A"内的背景与身体背景对齐,即如果窗口调整大小,背景图像将作为封面反应而作出反应那么"A"中的图像也应如此.

我已经没有想法如何实现这个...我能想到的最后一件事是background-attachment: fixed使用复杂的CSS 来创建"A",就像许多不同宽度/高度的div,边界半径,翻译等来创建字母"A".

编辑:我想我没有说明这个案例,所以请查看我想要实现的演示.请注意当您调整浏览器大小时灰度点如何与文本div保持对齐,而背景图像设置为覆盖宽度和高度,无论视图端口大小如何,并且点内的图像会更改以呈现相同的位置... I只想拥有更复杂的形状,如A或Z而不是奇怪的形状.

我正在使用bootstrap 4并尝试创建这种形状的图像:

整个正方形是我的形象,但我想切掉红色部分或使其透明,以便看到背景颜色.

<div class="container">
   <div class="row">
       <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
           <img src="path/to/image" class="img-fluid" alt="Some text">
       </div>
   </div>
</div>

我怎么做到这一点？

我使用CSS border-left和border-right以及border-top属性做了第二个,代码如下.

现在我想只制作第一张图像的边框形状.

.team-social-icons a {
    background: #3C4E62;
    display: inline-block;
    width: 30px;
    height: 20px;
    color: #fff;
    position: relative;
}

.team-social-icons a:before {
    position: absolute;
    left: 0;
    top: -8px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 8px solid #3C4E62;
    content: "";
}
.team-social-icons a:after {
    position: absolute;
    left: 0;
    bottom: -8px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 8px solid #3C4E62;
    content: "";
}