腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS自定义形状

问CSS自定义形状
EN

Stack Overflow用户

提问于 2014-09-14 11:37:45

回答 2查看 50关注 0票数 0

我怎样才能做出这样的事情：

到目前为止，我已经有了: jsfiddle.net/xmqfe3h0/9

#test {
width: 315px;
height: 90%;
position: relative;
}

#test:before {
content: "";
position: absolute;
left: 70%;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 50px solid black;   
}

css

shapes

css-shapes

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-09-14 11:43:39

向您的css3形状添加倾斜：

  -webkit-transform: skew(40deg);
  -moz-transform: skew(40deg);
  -o-transform: skew(40deg);

JSFIDDLE DEMO

票数 0

Stack Overflow用户

发布于 2014-09-14 11:49:35

你必须把它分成长方形和三角形。三角形可以通过CSS转换生成(带有旋转的嵌套框)。必须设置背景图像的正确位置。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25837256

复制

CSS 实现各种形状

css html border transparent width

# 原理 # border-width 三角形图片 <html> <body> <div id="border-triangle"></div> </body> </html> <style> #border-triangle { height: 0; width: 0; border-left: 50px solid red; border-top: 50px solid blue; border-right: 50px solid green; border

Cellinlab

2023/05/17

5100

html前端之css绘制形状

css

纯CSS绘制的图形，有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，非常强大。

菲宇

2020/07/30

2K0

45个值得收藏的 CSS 形状

css 编程算法费用中心

CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。

前端小智@大迁世界

2019/05/06

1.1K0

Css3新特性应用之形状

容器

一、自适应椭圆 * border-radius特性： * 可以单独指定水平和垂直半径，并且值可以是百分比，用/（斜杠）分隔这两个值即可（可以实现自适应宽度椭圆）。 * 还可以单独指定四个角度不同的水平和垂直半径（可以实现半椭圆） * 四分之一椭圆，主要是调整水平和垂直的半径 * 示例代码： .wrap{ border-radius: 50% / 30%; width: 60px; height: 80px;

sam dragon

2018/01/17

8730

css绘图，实现一些特殊形状

html css

还是和前面的tips一样，多用after和before，能省俩标签！俩！比如这一堆的形状 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="前端开发,CSS,HTML,XHTML,JS" /> <meta name="description" content="专注前端技术博客" /> <t

练小习

2018/01/15

9270

html 鼠标形状箭头,CSS各种鼠标样式介绍

jquery xml css http 网站

大家好，又见面了，我是你们的朋友全栈君。大家否曾注意到有些网站的鼠标不是规则的斜向上箭头的形状，而是十字形，或者是向左的箭头，或者是个问号等等。当你想在网页的不同位置让鼠标显示不同形状，以体现不同

全栈程序员站长

2022/09/01

8.4K0

简单总结CSS中元素形状的平滑变化

css transition 连接网络语法

transition属性包括四个子属性，即transition-property、transition-duration、ransition-timing-function、transition-delay，各个属性的含义见下方表格：

知识分子没文化

2023/07/01

3030

Android项目实战（九）：CustomShapeImageView 自定义形状的ImageView

其他

一个两年前出来的第三方类库，具有不限于圆形ImageView的多种形状ImageView，项目开发必备 github下载地址：https://github.com/MostafaGazar/CustomShapeImageView 1、首先源码中有一个第三方类库：library 先要把Library导入到项目中，不会的可以看下导入方法：关于Eclipse 和 IDEA 导入library库文件的步骤 2、源码中res文件夹下有一个raw文件夹复制到自己的项目中（选择性复制，是一些特殊的图形）可以看

听着music睡

2018/05/18

7180

使用纯CSS创建三角形形状

html css

如何在页面中实现三角形，有以下几种方式；一、使用css绘制三角形 HTML代码： <div class="triangle"></div> CSS代码：（1）箭头向上 .triangle { width: 0; height: 0; border-bottom: 20px solid #333; border-left: 20px solid transparent; border-right: 20px solid transparent; } （2）箭头向右 .triangl

申霖

2019/12/27

1K0

用CSS绘制最常见的40种形状和图形

css html

今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。

江一铭

2022/06/16

1.4K0

形状匹配

cv2

相同图像的matchShape= 0.0 相似图像的matchShape= 0.19863853606386983 不相似图像的matchShape= 0.11567279132076783

裴来凡

2022/05/28

1.2K0

Python自定义词云图形状和文本颜色

mask png word

2）wordcloud.WordCloud类colormap和mask参数的应用。

Python小屋屋主

2019/12/13

2K0

【CSS】CSS自定义属性进阶使用（一）

css 容器 grid image 响应式

在传统的CSS中，通常我们需要写重复的属性值，而自定义原则能让我们避免这种情况。做到“一处定义，处处使用”。

前端修罗场

2023/10/07

2500

CSS自定义鼠标样式[通俗易懂]

https java 网络安全 php css

cursor属性： cursor 属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

全栈程序员站长

2022/09/02

1.2K0

UE运行时动态生成自定义物理形状碰撞检测

游戏解决方案

在MMORPG游戏中，针对一些范围伤害的计算，会涉及到碰撞/相交检测。在传统的2D或2.5D游戏中，或者要求不那么精确的3D游戏中，这种相交检测可以简化为平面上圆形与各种形状（如圆形、矩形、扇形等）是否相交的检测^1^，但是当考虑上飞行、跳跃等逻辑后，就必须进行3D空间的相交检测了，此时就需要借助物理引擎的功能。

Kill Console

2022/08/19

3.6K0

css 自定义 ol/li 序号样式

css

默认样式：自定义样式： CSS 代码： ol { counter-reset: li; // 创建计数器 } ol li { position: relative; padding-left: 30px; } ol li::before { content: counter(li) "."; counter-increment: li; // 递增计数器 position: absolute; left: 0; font-size: 28px; color:

小鑫

2022/05/11

1.5K0

css 自定义 ol/li 序号样式

css

默认样式： [image.png] 自定义样式： [image.png] ol { counter-reset: li; // 创建计数器 } ol li { position: relative; padding-left: 30px; } ol li::before { content: counter(li) "."; counter-increment: li; // 递增计数器 position: absolute; left: 0; font-size: 28

小唐同学.

2022/02/18

1.9K0

css使用自定义字体教程

css display src

定义好字体之后，在需要使用的元素上，直接加font-family就可以了，值需要跟定义的名字一致

心念

2023/01/12

1.5K0

SVG 形状写法示例

svg

线 <line x1="10" x2="50" y1="110" y2="150"/> 折线 <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/> 矩形在座标为 (10,20) 的地方画一个宽 30，高 15 的矩形。 <svg> <rect x="10" y="20" width="30" height="15"/> </svg> 背景色红色的矩形。 <svg> <

前端GoGoGo

2018/08/24

9910

点击加载更多

相似问题

CSS自定义形状箭头

使用CSS自定义形状

CSS + HTML自定义形状按钮

CSS自定义形状不可伸缩

Css3自定义形状

112

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

社区富文本编辑器全新改版！诚邀体验～

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

问CSS自定义形状
EN

回答 2

Stack Overflow用户

Stack Overflow用户

CSS自定义形状箭头

使用CSS自定义形状

CSS + HTML自定义形状按钮

CSS自定义形状不可伸缩

Css3自定义形状

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS自定义形状EN

回答 2

Stack Overflow用户

Stack Overflow用户

CSS自定义形状箭头

使用CSS自定义形状

CSS + HTML自定义形状按钮

CSS自定义形状不可伸缩

Css3自定义形状

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS自定义形状
EN