小编Per*_*ijn的帖子
如何在HTML中创建泪滴？
如何创建这样的形状以显示在网页上？
我不想使用图像,因为它们会在缩放时变得模糊
我试过CSS:
.tear {
display: inline-block;
transform: rotate(-30deg);
border: 5px solid green;
width: 50px;
height: 100px;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}<div class="tear">
</div>结果真是搞砸了.
然后我尝试使用SVG:
<svg viewBox="0 100 100">
<polygon points="50,0 100,70 50,100 0,70"/>
</svg>它确实得到了形状,但底部没有弯曲.
有没有办法创建这个形状,以便它可以在HTML页面中使用？
推荐指数
解决办法
查看次数
圈加载动画
我正在尝试创建Apple的OS X圈加载动画.
到目前为止我尝试了什么:
.animation-wrapper {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 50%;
position: relative;
overflow: hidden;
filter: brightness(0.8);
-webkit-filter: brightness(0.8);
}
.pie-piece1 {
position: absolute;
width: 50%;
height: 50%;
bottom: 0;
left: 0;
background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 255, 0, 1) 100%);
}
.pie-piece2 {
position: absolute;
width: 50%;
height: 50%;
bottom: 0;
right: 0;
background: linear-gradient(to right, rgba(255, 255, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);
}
.pie-piece3 {
position: absolute; …推荐指数
解决办法
查看次数
如何在CSS中创建空心三角形
我想创建空心三角形,CSS但我不知道如何空心.我可以创建三角形,CSS但我有一个问题,这是:我不能掏空这个三角形.
这是我的代码:
HTML:
<div id="tringle"></div>
CSS:
#tringle {
position: absolute;
height: 0;
width: 0;
top: 50%;
left: 7px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid white;
}
推荐指数
解决办法
查看次数
创建包含形状文本的雪花形状
我想在冬季为我的网页创建一个雪花.
我尝试的第一件事是使用SVG创建它:
<h3>Koch Snowflake Frac</h3>
<svg viewBox="-5 -5 110 110" xmlns="http://www.w3.org/2000/svg">
<polyline stroke="cornflowerblue" stroke-width="2" fill="rgba(255,255,255,0.5)" points="55 5,
60 10,
65 10,
65 15,
70 20,
75 20,
80 15,
85 20,
90 20,
85 25,
90 30,
80 30,
75 35,
80 40,
90 40,
85 45,
90 50,
85 50,
80 55,
75 50,
70 50,
65 55,
65 60,
60 60,
55 65,
50 60,
45 60,
45 55,
40 50,
35 50,
30 55,
25 50,
20 …推荐指数
解决办法
查看次数
在Windows 8平板电脑上处理虚拟键盘
在我的网页中,我有一个文本输入字段,在Windows 8.1平板电脑中被键盘覆盖.
我希望平板电脑能够"推高"网页内容(因为它可以在iPad上运行).
那么:是否有可能使键盘不覆盖我的输入字段？我可以通过javascript检测虚拟键盘是否处于活动状态吗？
推荐指数
解决办法
查看次数
在python中使用点名称导入
如何在python中导入虚线名称文件？
我不是指相对路径,而是指开始或包含点的文件名 "."
例如:'.test.py'是文件名.
import .test将在父包中搜索test包含py模块的包.
推荐指数
解决办法
查看次数
什么html元素是可以的
我正在尝试找到可以列表的元素列表.
我知道元素和添加了属性tab-index的元素是可列表的,但其他HTML元素是否可以列表？
并且可选地,为什么它们在默认情况下可以列表？html tabindex
推荐指数
解决办法
查看次数
如何在SVG中使用CSS背景网址
我正在尝试background: url(#myid);将id 链接到SVG元素。
<svg id="myid"></svg>
这有可能吗？难道我做错了什么？
<svg id="myid"></svg>
.spesial {
width: 100px;
height: 100px;
background-image: url(#test);
}我知道我可以设置链接中的所有数据，但是那样我将无法重用它。URL
而且<image href="pic.svg"后来我的CSS样式必须是内联。
推荐指数
解决办法
查看次数
发表论文css3
我试图在纯css3中创建一个带过渡和盒子阴影的贴纸.到目前为止,我已经完成了两面都有阴影的纸张,但我想让它看起来像这样:
没有图像,这甚至可能吗？
.shadow {
width: 150px;
height: 150px;
background-color: yellow;
position: relative;
}
.shadow:after {
position: absolute;
right: 10px;
left: auto;
-webkit-transform: skew(8deg) rotate(3deg);
-moz-transform: skew(8deg) rotate(3deg);
-ms-transform: skew(8deg) rotate(3deg);
-o-transform: skew(8deg) rotate(3deg);
transform: skew(8deg) rotate(3deg);
}<div class="shadow">
edit this even further
</div>推荐指数
解决办法
查看次数
如何同时拥有水平和垂直导航栏
我怎样才能同时拥有水平和垂直导航栏？我是一个设计方面的新手，我试图找出我做错了什么，但我不知道如何在多个链接上使用CSS。
<body>
<div class="horizontallinks">
<ul>
<li> link1 </li>
<li>link 2</li>
<li>link 3</li>
<li>
<link 4</div>
<div class="verticallinks">
<ui>
<li>link a </li>
<li> link b</li>
<li> link c </li>
</div>
</ul>
</body>
CSS：
.horizontallinks {
position: fixed;
list-style-type: none;
margin-top: 70px;
margin-left: 300px;
padding: 0;
font-size: 18px;
overflow: hidden;
background-color: white;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.verticallinks {
position: fixed;
list-style-type: none;
padding: 0;
font-size: 18px;
margin-left: 45px;
margin-top: 165px;
display: block;
color: black; …推荐指数
解决办法
查看次数
标签 统计
html ×8
css ×7
css-shapes ×5
svg ×4
css3 ×3
browser ×1
html5-canvas ×1
import ×1
javascript ×1
python ×1
tabindex ×1
windows-8.1 ×1