CSS triangle containing text

by

For your plan B (to center the text within the triangle both vertically and horizontally), which I prefer as solution, you could add this css rule:

.up p {
    text-align: center;
    top: 80px;
    left: -47px;
    position: relative;
    width: 93px;
    height: 93px;
    margin: 0px;
}

Try it here:

.up {
  width: 0px;
  height: 0px;
  border-style: inset;
  border-width: 0 100px 173.2px 100px;
  border-color: transparent transparent #007bff transparent;
  float: left;
  transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -o-transform: rotate(360deg);
}

.up p {
  text-align: center;
  top: 80px;
  left: -47px;
  position: relative;
  width: 93px;
  height: 93px;
  margin: 0px;
}
<div class="up">
  <p>some information text goes here
    <p>
</div>

View on JSFiddle

More Related Contents:

  1. Paragraph of text in circle using CSS [duplicate]
  2. Vertical Text Direction
  3. Setting a max character length in CSS
  4. How to stop text from taking up more than 1 line?
  5. How to draw circle in html page?
  6. Easier way to create circle div than using an image?
  7. HTML: Changing colors of specific words in a string of text
  8. Dual-Color Text
  9. HTML + CSS: Numbered list with numbers inside of circles
  10. Changing the highlight color when selecting text in an HTML text input
  11. How to use an tag inside a in the middle of a text? [duplicate]
  12. Making text background transparent but not text itself
  13. How can I align text directly beneath an image?
  14. How to place Text and an Image next to each other in HTML?
  15. How to make a div fill a remaining horizontal space?
  16. flex-grow not sizing flex items as expected
  17. Responsive image map
  18. How to make a vertical line in HTML
  19. How to display an unordered list in two columns?
  20. Difference in applying CSS to html, body, and the universal selector *?
  21. Transform: translate(-50%, -50%)
  22. How to create a curve between two gradient using CSS?
  23. How can I fill a div with an image while keeping it proportional?
  24. How to create a transparent triangle with border using CSS?
  25. Unwanted border-radius corners around images in Brave/Chrome browser
  26. Progress Bar with HTML and CSS
  27. scrollable?
  28. How do I make a text input non-editable?
  29. How can I position an icon over an image or video?
  30. 2 colors in one placeholder of input field

Leave a Comment