How to create a triangle in CSS3 using border-radius

后端未结

关注

 7  1866

I am using border-radius property to acheive rounded corners. But I am not sure how to get rounded corners of this shape. I tried giving same dimensions from either sides bu

相关标签:

7条回答

花落未央

2020-11-30 12:02

I used this for add triagle to link:

.review-box_left-link:after{
    content: '';
    position: absolute;
    width: 19px;
    height: 19px;
    background: #2195DB;
    border-radius: 2px;
    transform: rotate(-45deg);
    background: linear-gradient(to right bottom, white 0%,white 50%,#2195DB 50%,#2195DB 50%,#2195DB 100%);
}

0 讨论(0)

挽巷

2020-11-30 12:03

<!DOCTYPE html>
<html>
<head>
<style>

.trio {position:absolute;}
.trio .triangle {
    position: relative;
    background-color: #DB524B;
    text-align: left;
}
.trio .triangle:before,
.trio .triangle:after {
    content: '';
    position: absolute;
    background-color: inherit;
}
.trio .triangle,
.trio .triangle:before,
.trio .triangle:after {
    width:  3em;
    height: 3em;
    border-top-right-radius: 33%;
}

.trio .triangle {
    transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
.trio .triangle:before {
    transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.trio .triangle:after {
    transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
.trio .exclamation{
    color: #DB524B;
    position:absolute;
    font-size:50px;
    top:8px;
    left:15px;
    z-index:2;
}

.trio .triangle.tri-in {
    background-color: #fff;
    margin-top: -2.9em;
    margin-left: 1px;
}
.trio .tri-in,
.trio .tri-in:before,
.trio .tri-in:after {
    width:  2.9em;
    height: 2.9em;
    border-top-right-radius: 33%;
}
/* styles below for demonstration purposes only */
body { padding: 30%; }
</style>
</head>
<body>
<div class="trio">
<span class="exclamation">!</span>
<div class='triangle'></div>
<div class='triangle tri-in'></div>
</div>
</body>
</html>

0 讨论(0)

挽巷

2020-11-30 12:06

Triangles in different sizes with border radius

To flip or to change vertical alignment fork translateY() and rotate()

/*triangle background large*/
.triangle-bg-lg, .triangle-bg-lg:before, .triangle-bg-lg:after { width: 25em; height: 25em; }

/*triangle background medium*/
.triangle-bg-md, .triangle-bg-md:before, .triangle-bg-md:after { width: 20em; height: 20em; }

/*triangle background small*/
.triangle-bg-sm, .triangle-bg-sm:before, .triangle-bg-sm:after { width: 15em; height: 15em; }

/*triangle background extra small*/
.triangle-bg-xs, .triangle-bg-xs:before, .triangle-bg-xs:after { width: 10em; height: 10em; }

/*triangle background extra extra small*/
.triangle-bg-xxs, .triangle-bg-xxs:before, .triangle-bg-xxs:after { width: 5em; height: 5em; }

/*common triangle style*/
.triangle-bg-lg,.triangle-bg-md, .triangle-bg-sm,.triangle-bg-xs,.triangle-bg-xxs {
    overflow: hidden;
    position: relative;
    margin:2em auto;
    border-radius: 20%;
    transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
} 
.triangle-bg-lg:before, .triangle-bg-lg:after,.triangle-bg-md:before, .triangle-bg-md:after, .triangle-bg-sm:before, .triangle-bg-sm:after,.triangle-bg-xxs:before, .triangle-bg-xxs:after{
    position: absolute;
    background: #ccc;
    pointer-events: auto;
    content: '';
}
.triangle-bg-xs:before, .triangle-bg-xs:after{
    background: #ccc;
    position: absolute;
    pointer-events: auto;
    content: '';
}
.triangle-bg-lg:before, .triangle-bg-md:before, .triangle-bg-sm:before, .triangle-bg-xs:before,.triangle-bg-xxs:before {
    border-radius: 20% 20% 20% 53%;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
            skewX(30deg) scaleY(.866) translateX(-24%);
}
.triangle-bg-lg:after, .triangle-bg-md:after,.triangle-bg-sm:after,.triangle-bg-xs:after,.triangle-bg-xxs:after {
    border-radius: 20% 20% 53% 20%;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
            skewX(-30deg) scaleY(.866) translateX(24%);
}

<div class="page-container">
    <div class="triangle-bg-lg"></div>
    <div class="triangle-bg-md"></div>
    <div class="triangle-bg-sm"></div>
    <div class="triangle-bg-xs"></div>
    <div class="triangle-bg-xxs"></div>
</div>

0 讨论(0)

花落未央

2020-11-30 12:07

This is even better

CSS

.c1 {
    width:50px;
    height:50px;
    background-color:yellow;
    -webkit-transform:rotate(45deg);
    position: relative;
    top: -65px;
    left: 25px;
    z-index:-1;
    border: 2px solid rgba(0,255,0,.6);
}
.c2 {
    width: 50px;
    height: 72px;
    background-color: yellow;
    z-index: 10000;
    border: 2px solid rgba(0,255,0,.6);
    border-right: 0;
}

HTML

<div class="c2">Hello</div>
<div class="c1"></div>

DEMO: http://jsfiddle.net/YWnzc/237/

0 讨论(0)

长情又很酷

2020-11-30 12:09

If I have understood your question properly. I think you can use something like below:

CSS:

#box{   border-color: transparent transparent transparent #FFFFFF;
    border-style: solid;
    border-width: 50px 0 50px 75px;
    height: 0;
    left: -40px;
    margin: 40px;
    position: absolute;
    width: 0;
}
 #outerbox{  background:red;
    height: 300px;
    position: relative;
    width: 122px;
}

HTML

<div id="outerbox"><div id="box"></div></div>

LIVE DEMO

http://jsfiddle.net/fsGQR//

0 讨论(0)

独厮守ぢ

2020-11-30 12:14
Demo
```
#player {
  margin: 32px;
  position: relative;
  width: 400px;
  height: 250px;
  background-color: #222;
}

#inner {
  transform: rotate(45deg);
  background-color: silver;
  width: 100px;
  height: 100px;
  top: 20px;
  left: -50px;
  position: relative;
  border-radius: 20px;
}

#outer {
  position: absolute;
  top: 50px;
  left: 165px;
  width: 70px;
  height: 140px;
  overflow: hidden;
}
```
```
<div id="player">
  <div id="outer">
    <div id="inner"></div>
  </div>
</div>
```
This should produce:

The effect is achieved by creating a square, rotating it with a CSS transform, rounding the corners, and clipping it with an outer box. The inner element can be adjusted as desired, so it is somewhat flexible.

http://css3shapes.com/ has some nice examples (note the heart at the bottom of the page)

Alternatives

SVG images support shapes of this type and are supported in all modern browsers. Simple SVGs can be coded by hand as XML, and there are a variety of free/paid editors for working with them.

See also: Raphaël, a library for working with vector graphics on the web
0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 下一页

How to create a triangle in CSS3 using border-radius

Demo

Alternatives