如何创建具有波浪边缘的形状 [英] How to create shape with a wavy edge

问题描述

我需要在Dreamweaver上制作自定义形状（请参见附图），并找到以下代码以供参考。我不确定要在参考代码中更改哪些值以实现自定义形状。我不知道要更改哪些值：顶部，左侧，宽度或高度以适合我的自定义形状。我最大的形状宽度是1832px。波浪的最大高度为179px。较小的波浪高度是113px。请帮助。

参考：
http://jsfiddle.net/ 7fjSc / 9 /

#wave {position：relative;身高：70px;宽度：600px;背景：＃e0efe3;}＃wave：before {content：;显示：块;位置：绝对;边界半径：100％50％;宽度：340px; height：80px;背景颜色：白色; right：-5px; top：40px;}＃wave：after {content：;显示：块;位置：绝对;边界半径：100％50％;宽度：300px;身高：70px; background-color：＃e0efe3;左：0;

< div id =wave：        >< / div>

解决方案你可以从这个链接中看到：

http://jsfiddle.net/7fjSc/1248/ $ b

  #wave：之前
  

和

 ＃ wave：在
之后 

指的是定位在矩形上的两个椭圆形圆。左边的省略号与矩形（＃e0efe3）的颜色相同，而右边的省略号与背景（白色）的颜色相同。这是使用CSS制作圆形对象的常用技巧。你的例子将较小的圆圈放置在一个大的矩形上，但为了达到你想要的形状，你将不得不在较小的矩形上放置较大的圆圈（这会给你左侧的弯曲形状）。要实现椭圆形，更改border-radius属性。操纵这些属性应该可以让你获得你需要的形状。祝你好运！

I need to make custom shape(see image attached) on Dreamweaver and found the code below for reference. I'm not sure which values to change in the reference code to achieve my custom shapes. I don't know which values to change: top, left, width, or height to suit my custom shape. My max width of the shape is 1832px. Max height of wave is 179px. Lesser wave height is 113px. Please help.

Reference: http://jsfiddle.net/7fjSc/9/

#wave {
  position: relative;
  height: 70px;
  width: 600px;
  background: #e0efe3;
}
#wave:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 340px;
  height: 80px;
  background-color: white;
  right: -5px;
  top: 40px;
}
#wave:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 300px;
  height: 70px;
  background-color: #e0efe3;
  left: 0;
  top: 27px;
}

<div id="wave"></div>

解决方案

You can see from this link:

http://jsfiddle.net/7fjSc/1248/

#wave:before

and

#wave:after

refer to two elliptical circles that are positioned over a rectangle. The left ellipsis is the same color as the rectangle (#e0efe3) while the ellipsis to the right is the same color as the background (white). This is a common technique with CSS to make rounded objects. Your example places smaller circles over a large rectangle, but to achieve the shape you want, you will have to place larger circles over a smaller rectangle (this will give you the curved shape on the left side). To achieve elliptical circles, change the border-radius attribute. Manipulation of these attributes should allow you to obtain the shape you need. Good luck!

这篇关于如何创建具有波浪边缘的形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！