`

Css自娱自乐

阅读更多

*、以下纯属自娱自乐,O(∩_∩)O哈哈~

<!DOCTYPE html>
<html>
<head>
    <title>Css小娱乐</title>
<style>
.div_egg {
    width: 100px;
    height: 50px;
    background-color: yellow;
    border-radius:38% 62% 62% 38%/ 50% 50% 50% 50%;
}
.div_triangle {
    width: 0px;
    height: 0px;
    border-left: 50px solid red;
    border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
}
.div_other_triangle {
    width: 200px;
    height: 0px;
    border-left: 100px solid red;
    border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
}
#hexagon {
    width: 100px;
    height: 55px;
    background: #fc5e5e;
    position: relative;
    margin: 100px auto;
}

#hexagon:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid yellow;
}

#hexagon:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid aqua;
}
/*
#sixangle {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 200px solid yellow;
    margin: 10px auto;
}
  
#sixangle:after {
    content: "";
    //content插入内容
    width: 0;
    height: 0;
    position: absolute;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 200px solid yellow;
    margin: 60px 0 0 -100px;
}*/
#star{
    width: 0px;
    height: 0px;
    margin: 50px 0;
    color: red;
    position: relative;
    display: block;
    border-bottom: 70px solid red;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    -webkit-transform: rotate(35deg);
}
#star:before{
    content: '';
    width: 0px;
    height: 0px;
    margin: 50px 0;
    color: yellow;
    position: relative;
    display: block;
    border-bottom: 80px solid red;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    -webkit-transform: rotate(-35deg);
    top: -45px;
    left: -65px;
}
#star:after{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    display: block;
    top: 3px;
    left: -105px;
    color: #fc2e5a;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
    
}
* {
    margin: 0px;
    padding: 0px;
}

div {
    margin: 100px;
}

#comment_bubble {
    width: 300px;
    height: 100px;
    background: #088cb7;
    position: relative;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

#comment_bubble:before {
    content: "";
    width: 0;
    height: 0;
    right: 100%;
    top: 38px;
    position: absolute;
    border-top: 13px solid transparent;
    border-right: 26px solid #088cb7;
    border-bottom: 13px solid transparent;
}
</style>
</head>
  <body style="background:black;">
  <table border="1">
     	 <tr><td style="color:green;">我像鸡蛋吗?</td><td><div class="div_egg"></div></td></tr>
         <tr><td style="color:green;">我是三角形哦!</td><td><div class="div_triangle"></div></td></tr>
		 <tr><td style="color:green;">还是三角</td><td><div class="div_other_triangle"></div></td></tr>
		 <tr><td style="color:green;">多边形</td><td><div id="hexagon"></div></td></tr>
		 <tr><td style="color:green;">六角星</td><td>被雪藏了<div id="sixangle"></div></td></tr>
		 <tr><td style="color:green;">小星星</td><td><div id="star"></div></td></tr>
         <tr><td style="color:green;">提示框</td><td><div id="comment_bubble"></div></td></tr>
  </body>
</html>

    啊哈~

分享到:
评论

相关推荐

    js五子棋,纯属自编,未实现人机对战,自娱自乐

    本项目为一个纯JavaScript实现的五子棋游戏,适用于自娱自乐,不包含人机对战功能。 在JavaScript中开发五子棋游戏,主要涉及以下几个技术知识点: 1. **HTML5 Canvas**: 游戏界面通常使用Canvas进行绘制,这是一...

    自娱自乐:一个属于自己打造的音乐网站mysic.zip

    前端开发:HTML、CSS、JavaScript等用于构建网页和Web应用程序的技术。 后端开发:涉及服务器端编程、API开发、数据库集成等技术。 移动应用开发:包括iOS开发(使用Swift或Objective-C)和Android开发(使用Java或...

    了解CSS3的all属性的使用

    兼容性还行, 除了IE不支持,其他浏览器基本上都绿油油,目前自娱自乐,内网项目什么的都是可以用用的。 二、all是干嘛用的 all属性实际上是所有CSS属性的缩写,表示,所有的CSS属性都怎样怎样,但是,不包括unicode...

    网页版植物大战僵尸

    ...在这个游戏中,所有的角色、场景和动画效果都是通过Canvas API绘制的。开发者通过控制画布上的对象位置、大小、颜色等属性,实现了游戏中的物体...无论是自娱自乐还是专业学习,这个开源项目都值得你去探索和尝试。

    微信小游戏-2

    微信小游戏是腾讯微信平台推出的一种轻量级的互动娱乐应用,它们基于JavaScript、HTML和CSS技术构建,用户可以直接在微信内置浏览器中打开游玩,...无论是自娱自乐还是职业发展,这个压缩包都提供了丰富的学习素材。

    最近抖音比较火的便携小空调源码(Web版)

    抖音 超火的 便携小空调 网站html源码下载,抖音超火的便携小空调源码,本源码只是自娱自乐的玩乐工具,并非真正的空调,源码无需数据库,支持HTML即可使用。 演示:http://c.aq060ly.cn/top3

    摸头GIF动态在线生成源码.rar

    标题中的“摸头GIF动态在线生成源码.rar”表明这是一个关于创建动态GIF表情包的源代码包,主要用于...同时,对于非开发人员,它也提供了一个自娱自乐的工具,可以轻松创建个性化的GIF表情包,用于社交媒体或私人通讯。

    网页界面设计流程.docx

    如果不能从全局的角度来做视觉设计,则只能是做做把水晶效果改成金属效果这样的自娱自乐,而对产品本身没有任何有价值的帮助。 Step 3:演示版 演示版是网页设计的第三步,在这个阶段,我们需要按照原型和模型用...

    JavaScript和HTML一样将长存JohnResig访谈.pdf

    他讨厌浏览器的 Bug,不同的浏览器有不同的 Bug,说他用 JavaScript 和 CSS 选择引擎,之后还做了动画引擎,都是自娱自乐。但与此同时,他发现自己不能将制作的一些应用放到浏览器里。于是,他开始制作相关的 API,...

    网页模板——纯js模仿微信打飞机游戏代码(已测试).zip

    网页模板——纯js模仿微信打飞机游戏代码是一个充满趣味性的编程项目,旨在通过JavaScript语言实现一个类似微信小程序中流行的“打飞机”小游戏。...无论是自娱自乐还是提升技术,这个项目都是一个很好的选择。

    MyKTV.zip_KTV_MyKTV_karaoke_myktv点歌系统_myktv系统

    总的来说,MyKTV系统是结合了现代技术与KTV娱乐理念的产物,旨在为用户提供一个集点歌、唱歌、管理于一体的自娱自乐平台。无论是从用户的角度还是从技术的角度,这款系统都展现了丰富的设计和实现细节,是家庭KTV...

    捕鱼小游戏.zip

    【捕鱼小游戏.zip】是一款基于JavaScript(js)和HTML技术开发的前端小游戏,名为"捕鱼达人",旨在为玩家提供一种自娱自乐的娱乐方式。这款游戏的实现充分展示了JavaScript和HTML在网页交互与动态效果方面的强大功能...

    4.cnPHP个人仿照开发.rar

    这个项目可能是为了学习、实践或自娱自乐,作者提醒用户不要过于苛责,对于感兴趣的人,他鼓励下载并给予支持。 【描述】"4cn php 源码 仿站 mysql数据库"说明这个项目是用PHP语言编写的,并且它复刻了4.cn网站的...

    QQClient 客户端

    尽管这是一个自娱自乐的项目,但其开发过程涵盖了多个关键的IT知识点,包括网络编程、即时通讯协议解析、用户界面设计、安全性和性能优化等,对于提升开发者的技术能力和实践经验有着积极的作用。

    simple-google-homepage

    【描述】提到,该项目完全基于HTML和CSS,这意味着它没有使用JavaScript或其他编程语言来增加动态元素或...总的来说,无论是教学还是自娱自乐,"简单的Google主页项目"都提供了一个学习和实践Web开发基础的好平台。

    botonera-tkb:一个小型鼓包工具包库,供您娱乐

    "Botonera-TKB"是一个小型的鼓包工具包库,设计用于娱乐目的,让你能够通过简单的键盘操作体验打击乐的乐趣。... ...用户只需在键盘上敲击指定的键,就...无论是自娱自乐还是作为学习实践,这个小型鼓包工具包库都值得探索。

    ffink.github.io:没有人要求的关于我的网站

    网站的名称表明它并非响应任何特定需求,而是作者自娱自乐或分享个人兴趣的平台。描述中的“没有人要求”可能是作者幽默的表达,意味着这个网站是出于个人爱好而建立的,而非商业或客户需求。 标签 "HTML" 提示我们...

    Disappointed Queen-crx插件

    这种文化现象体现了互联网的创意和自娱自乐精神,同时也展示了技术如何与社会文化相融合,创造出新颖的互动形式。 总的来说,"Disappointed Queen-crx"插件虽然看似简单,却生动地展现了扩展程序技术的潜力和趣味性...

    GeoAnim:动画街景并分享您的电影

    用户不仅可以自娱自乐,还能将这些“电影”分享给他人,促进信息的传播和交流。 GeoAnim的核心技术可能包括以下几个方面: 1. **地图API集成**:GeoAnim可能集成了如Google Maps API或OpenStreetMap等第三方地图...

Global site tag (gtag.js) - Google Analytics