css三角形、css伪类实现尖角(before、after)

原创已于 2024-12-31 18:03:40 修改 · 7.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css特殊图形 #css尖角 #css三角形 #伪类实现三角形 #css-before的应用

于 2019-02-20 17:07:02 首次发布

css、css3 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍如何使用CSS伪元素:before和:after创建三角形，并通过调整边界属性改变三角形位置和方向。示例代码展示了如何创建顶部尖角，以及如何修改代码使三角形出现在元素左侧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css三角形、css伪类实现尖角(before、after)

1.Demo展示：

Alt

2 . Html布局：

	<div></div>

3. css样式表：


 	*{
		padding:0;
		margin:0;
	}

	div:before{
		content:"";
		position:absolute;
		top:-10px;
		left:40px;
		border-bottom:10px solid green;
		border-left:10px solid transparent;
		border-right:10px solid transparent;
	}

	div{
		position:relative;
		width:100px;
		height:100px;
		margin:100px auto;
		box-shadow:0 0 2px green;
	}

4. 变更：

如果要使三角形出现在左边，把以下代码做相应的更改即可：

原来的：

	top:-10px;
	left:40px;
	border-bottom:10px solid green;
	border-left:10px solid transparent;
	border-right:10px solid transparent;

更改过后的：

	top: 40px;
	left: -10px;
	border-bottom: 10px solid transparent;
	border-top: 10px solid transparent;
	border-right: 10px solid green;

效果如下：

注：
(其他方向类似)
css伪类空缺圆，请查看：
link(https://blog.csdn.net/qq_43495629/article/details/87809044).

~如遇错误，欢迎指正；