css绘制特殊图形基础-html教程-PHP中文网

css绘制特殊图形基础

php中文网

发布： 2016-10-15 10:32:04

原创

1659人浏览过

1.等腰三角形

<span style="color: #800000;">.isosceles</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">30px solid</span>;<span style="color: #ff0000;">
    border-left-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
    border-right-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
    border-top-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
    border-bottom-color</span>:<span style="color: #0000ff;"> red</span>;
}

登录后复制

2.直角三角形

<span style="color: #800000;">.right</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">30px solid</span>;<span style="color: #ff0000;">
    border-left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border-right-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border-bottom-color</span>:<span style="color: #0000ff;"> red</span>;
}

登录后复制

3.圆

<span style="color: #800000;">.round</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;">50%</span>;   
}

登录后复制

4.椭圆

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

查看详情

<span style="color: #800000;">.ellipse</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 80px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;">50%</span>;   
}

登录后复制

立即学习“前端免费学习笔记（深入）”；

大家都在看：

如何在Pinegrow中集成CSS到HTML编辑器的详细教程 HTML数据怎样进行特征提取 HTML数据特征工程的实践技巧 html函数如何设置元素样式属性 html函数结合CSS的内联技巧 CSS样式怎么直接嵌入HTML_CSS样式直接嵌入HTML的快速教程 html5文件如何处理二进制数据 html5文件ArrayBuffer的读取操作