CSS3引入伪元素变换特性使实现五角星图形非简单并且结合渐变实现更漂亮效
使用图片实现五角星已经毫必要（图片占用额外请求且数据量除非要支持低版本桌面IE浏览器）
首先我创建三角形通使用带尺寸边线零内容尺寸元素实现代码示范：
.tri { width: 0height: 0border-left: 15px solid transparentborder-right: 15px solid transparentborder-bottom: 30px solid red}
第二步我使用伪元素:after:before克隆2同三角形
.tri:after,.tri:before { width: 0height: 0border-left: 15px solid transparentborder-right: 15px solid transparentborder-bottom: 30px solid red}
我述2伪元素别应用同旋转变换：
.tri:before { transform: rotate(70deg)}.tri:after { transform: rotate(-70deg)}
我实现五角星图形（图标）我用类似实现更几何形状
虽然不是非常明白你的意思，但是我想你应该是需要整个页面都显示关灯效果，一般只需要另外加一个浮动层，宽高度都是100%，然后z-index比你要突出显示的部分的值小，但是大于其他页面上要隐藏的元素声明楼上的答复基本上是对的
但是，还是告诉你css3可以达成“处理click事件”类似的效果，比如checkbox，click后就能利用UI元素状态伪类来实现相应的变化，这种变化有点类似处理click事件，只是小范围的应用。
比如纯css3实现的checkbox按钮开关，你可以到mxria网站上看CSS3按钮开关的实现DEMO
css3在响应用户操作上很弱，基本上还是实现静态样式为主
![前端js 输入框限制（只能输入数字，10位小数，除0[0-9]、.、--、-0[0-9]、-.不能开头外，其他的都可以）？](/aiimages/%E5%89%8D%E7%AB%AFjs+%E8%BE%93%E5%85%A5%E6%A1%86%E9%99%90%E5%88%B6%EF%BC%88%E5%8F%AA%E8%83%BD%E8%BE%93%E5%85%A5%E6%95%B0%E5%AD%97%EF%BC%8C10%E4%BD%8D%E5%B0%8F%E6%95%B0%EF%BC%8C%E9%99%A40%5B0-9%5D%E3%80%81.%E3%80%81--%E3%80%81-0%5B0-9%5D%E3%80%81-.%E4%B8%8D%E8%83%BD%E5%BC%80%E5%A4%B4%E5%A4%96%EF%BC%8C%E5%85%B6%E4%BB%96%E7%9A%84%E9%83%BD%E5%8F%AF%E4%BB%A5%EF%BC%89%EF%BC%9F.png)
